一、gulp介绍
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
二、工程化的作用
- 自动压缩JS文件
- 自动压缩CSS文件
- 自动合并文件
- 自动编译sass
- 自动压缩图片
- 自动刷新浏览器
三、Node环境安装
- window下，下载node安装即可。 node下载地址：http://nodejs.cn/download/ ,安装比较简单，基本一直下一步即可，安装路径随意。
- 安装完成后，终端输入如下命令 显示版本号即安装成功。
node -v
四、gulp安装
(一) 推荐安装cnpm：
因为npm安装插件是从国外服务器下载，受网络影响大，可能出现异常，如果npm的服务器在中国就好了，所以我们乐于分享的淘宝团队干了这事。网址：http://npm.taobao.org
(二) 安装：命令提示符执行
npm install cnpm -g --registry=https://registry.npm.taobao.org
(三) 全局安装gulp
- 在com中执行
cnpm install gulp –g
- 查看是否正确安装：命令提示符执行
gulp –v，出现版本号即为正确安装
五、gulp插件安装（编译/压缩/合并/代码检查/即时刷新）
(一) 项目文件根目录新建package.json
注：package.json是基于nodejs项目必不可少的配置文件，它是存在项目根目录的普通json文件重点内容
进入你的项目文件
执行命令
cnpm init来新建package.json检测
package.json是否成功新建查看项目文件根目录，是否新建package.json，且内容是否和你终端中输入的一致。package.json内容如下：
{
"name": "test",
"version": "1.0.0",
"description": "我是描述",
"main": "index.js",
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
"author": "",
"license": "ISC"
}
注：可不使用cnpm init方式，可选择手动创建package.json配置文件
- 在项目中新建配置文件
package.json配置文件是为了将来项目迁移使用，测试demo时，可以不需要
{
“name”:”test”, //项目名称（必须）
“version”: “1.0.0”, //项目版本（必须）
“description”:”This is for study gulp project!”, //项目描述（必须）
“author”:{
//项目作者信息
“name”:”zzl”,
“email”:[Hsu@xx.com](mailto:Hsu@xx.com)
},
“devDependencies”:{
//项目依赖的插件，这个不用写，待会装完插件自动生成
“gulp”:”^3.8.11”,
“gulp-less”:”^3.0.0”
}
}
注：由于json文件里是不能写注释的，所以实际开发的时候，记得把注释去掉
-
Package.json的作用 当有一个新的项目需要建立，或者有人跟你合作开发时，我们不需要把项目中所有用到的模块（文件大小可能上百兆）都上传到git,只需要给项目带上一个配置文件 而对方拿到项目后，只需要一个命令npm install Node就可以自动读取项目的配置文件，并将所有依赖模块自动下载，这样不是更快捷，更方便吗？
(二) 本地安装gulp插件
注：全局安装gulp是为了执行gulp任务，本地安装gulp则是为了调用gulp插件的功能
(三) 进入你的项目文件路径中后，执行
cnpm install gulp --save-dev
(四) 安装gulp-sass插件（拿该插件进行示例）进入你的项目文件路径中后，执行
cnpm install gulp-sass --save-dev
(五) 常用插件
sass的编译（
gulp-sass）less编译 （
gulp-less）重命名（
gulp-rename）自动添加css前缀（
gulp-autoprefixer）压缩css（
gulp-minify-css）js代码校验（
gulp-jshint）合并js文件（
gulp-concat）压缩js代码（
gulp-uglify）压缩图片（
gulp-imagemin）自动刷新页面（
gulp-livereload，谷歌浏览器亲测，谷歌浏览器需安装livereload插件）图片缓存，只有图片替换了才压缩（
gulp-cache）更改提醒（
gulp-notify）
(六) 安装以上插件
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev
六、gulp使用
(一)创建一个gulpfile.js在根目录下，gulp只有四个API：tast,watch,src和dest
Task：这个API用来创建任务，在命令下可以输入gulp test来执行test任务。Watch: 这个API用来监听任务。Src: 这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss，vender.scss],也可以是正则表达式/**/*.scss。
4.Dest: 这个API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本
(二) 载入插件
- 接下来，我们需要建立一个
gulpfile.js档案，并且载入这些插件：
var gulp = require('gulp'),
sass = require('gulp- sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload');
七、 Gulp API
(一) 工作方式
gulp的使用流程一般是：
首先通过gulp.src()方法获取到想要处理的文件流，
然后把文件流通过pipe方法导入到gulp的插件中，
最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中，gulp.dest()方法则把流中的内容写入到文件中。
例如：
var gulp = require('gulp');
gulp.src('script/jquery.js') // 获取流的api
.pipe(gulp.dest('dist/foo.js')); // 写放文件的api
(二)globs的匹配规则
我们重点说说gulp用到的globs的匹配规则以及一些文件匹配技巧，我们将会在后面用到这些规则。 gulp内部使用了node-glob模块来实现其文件匹配功能。我们可以使用下面这些特殊的字符来匹配我们想要的文件：
| 匹配符 | 说明 |
|---|---|
| * | 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾 |
| ** | 匹配路径中的0个或多个目录及其子目录,需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。 |
| ? | 匹配文件路径中的一个字符(不会匹配路径分隔符) |
| [...] | 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 |
| !(pattern|pattern|pattern) | 匹配任何与括号中给定的任一模式都不匹配的 |
| ?(pattern|pattern|pattern) | 匹配括号中给定的任一模式0次或1次，类似于js正则中的(pattern|pattern|pattern)? |
| +(pattern|pattern|pattern) | 匹配括号中给定的任一模式至少1次，类似于js正则中的(pattern|pattern|pattern)+ |
| *(pattern|pattern|pattern) | 匹配括号中给定的任一模式0次或多次，类似于js正则中的(pattern|pattern|pattern)* |
| @(pattern|pattern|pattern) | 匹配括号中给定的任一模式1次，类似于js正则中的(pattern|pattern|pattern) |
下面以例子来加深理解
| 匹配符 | 能匹配 | 不能匹配 |
|---|---|---|
| *.* | a.js, style.css, a.b, x.y | |
| */*/*.js | a/b/c.js,x/y/z.js, | a/b.js,a/b/c/d.js |
| ** | abc,a/b.js,a/b/c.js,x/y/z,x/y/z/a.b,能用来匹配所有的目录和文件 | |
| **/*.js | foo.js,a/foo.js,a/b/foo.js,a/b/c/foo.js | |
| a/**/z | a/z, a/b/z ,a/b/c/z, a/d/g/h/j/k/z | |
| a/**b/z | a/b/z,a/sb/z, | a/x/sb/z, 因为只有单**单独出现才能匹配多级目录 |
| ?.js | a.js,b.js,c.js | |
| a?? | a.b,abc, | ab/,因为它不会匹配路径分隔符 |
| [xyz].js | 只能匹配 x.js,y.js,z.js, | xy.js,xyz.js等, 整个中括号只代表一个字符 |
| [^xyz].js | a.js,b.js,c.js等, | x.js,y.js,z.js |
(三) src：获取流(源文件路径)
gulp.src()方法正是用来获取流的，但要注意这个流里的内容不是原始的文件流，而是一个虚拟文件对象流(Vinyl files)，这个虚拟文件对象中存储着原始文件的路径、文件名、内容等信息。其语法为：gulp.src(globs[, options]);
globs参数是文件匹配模式(类似正则表达式)，用来匹配文件路径(包括文件名)，当然这里也可以直接指定某个具体的文件路径。当有多个匹配模式时，该参数可以为一个数组;类型为String或 Array。当有多种匹配模式时可以使用数组
//使用数组的方式来匹配多种文件
gulp.src(['js/\*.js', 'css/*.css', '\*.html'])
(四) dest：写文件（目标文件路径）
gulp.dest()方法是用来写文件的，其语法为：
gulp.dest(path[,options])
path为写入文件的路径；
(五) watch：监听文件
gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为
gulp.watch(glob[, opts], tasks);
如：
gulp.task(“one”,function(){
});
gulp.task(“two”,function(){
});
gulp.watch('js/\*\*/*.js', [“one”,”two”]);
(六) task：定义任务
gulp.task方法用来定义任务，其语法为：
gulp.task(name[, deps], fn)
name为任务名；
deps 是当前定义的任务需要依赖的其他任务，为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数；
fn 为任务函数，我们把任务要执行的代码都写在里面。该参数也是可选的。
当你定义一个简单的任务时，需要传入任务名字和执行函数两个属性。
如：
gulp.task('greet', function () {
console.log('Hello world!');
});
八、 结合sass的使用
(一) 建立任务
- 编译
sass,Autoprefix及缩小化 - 首先，我们
设置编译Sass。我们将编译Sass、接着通过Autoprefixer，最后储存结果到我们的目的地。接着产生一个缩小化的.min版本、自动重新整理页面及通知任务已经完成：
gulp.task('styles', function() {
//编译sass
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
//添加前缀
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
//保存未压缩文件到我们指定的目录下面
.pipe(gulp.dest('dist/assets/css'))
//给文件添加.min后缀
.pipe(rename({suffix: '.min'}))
//压缩样式文件
.pipe(minifycss())
//输出压缩文件到指定目录
.pipe(gulp.dest('dist/assets/css'))
//提醒任务完成
.pipe(notify({ message: 'Styles task complete' }));
});
- 说明：
gulp.task('styles', function() { ... )};
这个gulp.taskAPI用来建立任务。可以透过终端机输入$ gulp styles指令来执行上述任务。 -
return gulp.src('src/styles/main.scss')用来定义一个或多个来源档案。 -
.pipe(sass({ style: 'expanded' }))使用pipe()来找到哪个插件 -
.pipe(gulp.dest('dist/assets/css'));这个是用来设定目的路径。
(二) JS代码校验、合并和压缩
//发布任务
gulp.task(“scripts”,function(){
//js代码校验
return gulp.src(“javascripts/*.js”)
.pipe(jshint())
.pipe(jshint.reporter(“default”))
//js代码合并
.pipe(concat(“all.js”))
//给文件添加.min后缀
.pipe(rename({suffix:”.min”}))
//压缩脚本文件
.pipe(uglify())
//输出压缩文件到指定目录
.pipe(gulp.dest(“assets”))
//提醒任务完成
.pipe(notify({message : “Scripts task complete”}));
});
(三) 图片压缩
Gulp.task(“images”,function(){
return gulp.src(“images/*”)
.pipe(cache(imagemin({optimizationLeve1: 3,progressive:true, interlaced:true})))
.pipe(gulp.dest(“images”))
.pipe(notify({message : “Images task complete”}));
});
(四) 事件监听
Gulp.task(“watch”,function(){
gulp.watch(“stylesheets/\*.scss”,[‘styles’]);
gulp.watch(“javascripts/\*.js”,[“scripts”]);
gulp.watch(“images/\*”,[‘images’]);
livereload.listen();
gulp.watch([“assets/\*”]).on(“change”,livereload.changed);
});
(五) 运行
Gulp defaultGulp watch- 运行整个任务
gulp
(六) 总结
- 安装node
- 安装gulp（全局gulp,本地gulp及所需插件）
- 新建gulpfile.js文件
3.1 引入模块
3.2 创建任务 - 运行 gulp 任务名
- 我们自己设置的项目文件路径
5.1 如：
assets: 压缩后样式和脚本存放的目录
images: 图片存放目录
javascripts: 脚本存放目录
stylesheets: 样式存放目录
plugin: 插件存放目录
gulpfile.js
