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中），这样你就可以在全局范围内去使用它了
2.3测试：按window + r 输入cmd回车，然后输入node -v 然后输入npm -v 如果都能打印出相应版本信息，那么说明你配置成功了
三、选装cnpm
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。
(1)安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org；
注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重新打开，安装完直接使用有可能会出现错误；
将路径npm下bin文件的路径（一般在c盘中的Roaming中）配置到环境变量中，这样就可以在全局范围内使用cnpm命令了
注：cnpm跟npm用法完全一致，只是在执行命令时将npm改为cnpm。
四、全局安装gulp
(2)在cmd中执行
npm install gulp -g
cnpm install gulp -g
(2)查看是否正确安装：命令提示符执行gulp -v，出现版本号即为正确安装 注意配置环境变量
五、新建package.json文件
进入自己需要的一个文件夹中
cd (你项目的路径)
创建package.json文件
npm init
cnpm init
一直enter就可以
在项目目录下会形成这样的一个.json文件（部分内容为后添加的）
1 { 2 3 "name": "gulptest",//项目名称（必须） 4 5 "version": "0.0.1",//项目版本（必须） 6 7 "description": "这是一个gulp的测试程序",//项目描述（必须） 8 9 "homepage": "", //项目主页 10 11 "main": "index.js",//入口文件 12 13 "scripts": { 14 15 "test": "echo "Error: no test specified" && exit 1" 16 17 }, 18 19 "keywords": [//关键词 20 21 "gulp" 22 23 ], 24 25 "author": "",//作者 26 27 "license": "ISC"//项目许可协议 28 29 "devDependencies": { //项目依赖的插件 30 31 "gulp": "^3.8.11" 32 33 } 34 35 36 37 } 38 39
查看package.json帮助文档，命令提示符执行cnpm help package.json
六、本地安装gulp插件
安装：定位目录命令后提示符执行cnpm install gulp --save-dev；
七、创建文件
在目录中创建src文件夹，在该文件夹中创建初始前的项目文件
然后在你的项目的根目录下创建一个gulpfile.js文件
在该文件中写入
外挂列表
- 编译Sass (gulp-ruby-sass)
- Autoprefixer (gulp-autoprefixer)
- 缩小化(minify)CSS (gulp-minify-css)
- JSHint (gulp-jshint) 代码检查
- 拼接 (gulp-concat)
- 丑化(Uglify) (gulp-uglify)
- 图片压缩 (gulp-imagemin)
- 即时重整(LiveReload) (gulp-livereload)
- 清理档案 (gulp-clean)
- 图片快取，只有更改过得图片会进行压缩 (gulp-cache)
- 更动通知 (gulp-notify)
- 注意：gulp（编译） 或者gulp transCss压缩执行的命令