gulp简单使用
来源:互联网 发布:游族网络林奇妻子韩薇 编辑:程序博客网 时间:2024/06/04 20:12
Gulp使用教程
一、简介
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成。使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器,她能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成。并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。gulp 和 grunt 非常类似,但相比于 grunt 的频繁 IO 操作,gulp 的流操作,能更快地更便捷地完成构建工作
二、安装nodejs
2.1、说明:gulp是基于nodejs,理所当然需要安装nodejs;2.2、安装:打开nodejs官网(https://nodejs.org/en/),点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。注:安装完成之后注意将其配置到环境变量(系统变量path中),这样你就可以在全局范围内去使用它了我的路径是在D:\Program Files\nodejs\node_modules\npm\bin,记得把它也配置进去2.3测试:按window + r 输入cmd回车,然后输入node -v 然后输入npm -v 如果都能打印出相应版本信息,那么说明你配置成功了
三、选装cnpm
因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。网址:http://npm.taobao.org 安装:命令提示符执行npm install cnpm -g --registry=https://registry.npm.taobao.org; 注意:安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开,安装完直接使用有可能会出现错误;将路径C:\Users\asus\AppData\Roaming\npm\node_modules\cnpm配置到环境变量中,这样就可以在全局范围内使用cnpm命令了注:cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm(以下操作将以cnpm代替npm)。
四、全局安装gulp
在cmd中执行 cnpm install gulp -g查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装注意配置环境变量(C:\Users\asus\AppData\Roaming\npm\gulp)
五、新建package.json文件
进入自己需要的一个文件夹中cd F:\workspace\gulp创建package.json文件 cnpm init 在路径 下会形成这样的一个.json文件(部分内容为后添加的){ "name": "gulptest",//项目名称(必须) "version": "0.0.1",//项目版本(必须) "description": "这是一个gulp的测试程序",//项目描述(必须)"homepage": "", //项目主页 "main": "index.js",//入口文件 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [//关键词 "gulp" ], "author": "wuxunxun007",//作者 "license": "ISC"//项目许可协议"devDependencies": { //项目依赖的插件 "gulp": "^3.8.11", "gulp-less": "^3.0.0" }}查看package.json帮助文档,命令提示符执行cnpm help package.json
六、本地安装gulp插件
安装:定位目录命令后提示符执行cnpm install gulp --save-dev;本示例以gulp-less为例(编译less文件),命令提示符执行cnpm install gulp-less --save-dev;将会安装在node_modules的gulp-less目录下,该目录下有一个gulp-less的使用帮助文档README.md;
七、创建文件
在目录中创建src文件夹,在该文件夹中创建less文件夹和css文件夹 在less文件中创建一个index.less文件,写一些代码 然后在你的项目的根目录下创建一个gulpfile.js文件在该文件中写入然后打开cmd窗口,或者你安装了git环境的话,直接在该文件夹下右键点解Git Base Here,然后输入gulp命令,那么你就在你的src/css文件夹下就可以看到一个index.css文件,这个文件就是我们编译less文件之后生成的一个css文件
八、复制文件
8.1复制页面在根目录下创建一个index.html写一点内容,然后将gulpfile.js修改为然后在命令行没执行gulp copy-index 那么我们就会在根目录下发现一个index.html文件8.2 拷贝图片文件images修改gulpfile.js复制iamges文件加下的所有jpg文件执行命令 gulp images在dist/images下有这样三个文件复制iamges文件加下的所有jpg和png文件执行命令复制iamges文件加下的所有文件执行命令8.3 同时拷贝两个文件夹,拷贝到dist文件夹下的data中修改gulpfile.js执行命令gulp data8.4 拷贝文件是过滤文件,在json文件中新建一个json为test.json, 然后修改gulpfile.js删除dist/data文件下的文件执行命令我们发现,并没有把test.json拷贝进来8.5如何将以上命令一次性执行,采用bulid命令执行命令
阅读全文
0 0
- gulp的简单使用
- gulp简单使用
- gulp简单使用
- gulp简单使用
- gulp安装和简单使用
- gulp雪碧图插件,gulp-css-spriter简单使用
- gulp原理与使用-简单说
- gulp自动化构建工具的简单使用
- Gulp 使用
- gulp使用
- gulp使用
- gulp使用
- gulp使用
- 使用Gulp
- gulp使用
- gulp使用
- gulp-gulp使用小结(一)
- gulp的简单使用(MAC OX 系统)
- word转html工具
- centos7安装配置oracle(包括yum下载依赖包)(不含监听配置)
- gulp教程之gulp-less
- PHP WebShell变形技术总结
- Python3爬虫学习笔记(3.正则详解及实例)
- gulp简单使用
- Oracle序列的创建与重置
- C#加密解密
- Spring Cloud微服务架构代码结构详细讲解
- RxSwift
- 对称加解密和非对称加解密
- android addr2line使用
- android资料集合整理
- 安全框架Shiro和Spring Security比较