前端构建神器之 gulp
由于受台风“灿鸿”影响，这个周末未能出去徒步，为了不荒废这大好的时光，故总结一下前段时间学习的gulp。
gulp 是现在比较流行的前端构建工具，它比较显著的特点就是配置简单易学，并且gulp最大优势还在于它是利用流（Streams）的方式进行文件的处理，通过管道（pipe）将多个任务（task）及操作链接起来。因此流程更明确清晰。构建的速度上也比grunt（另一款前端构建工具）快。（如果项目很小，速度差距则不是那么明显）
gulp安装
1、首先确保你的运行环境已经安装了nodejs 环境。然后打开终端运行：
npm install gulp -g
2、全局安装成功后还需要在你构建的项目中单独安装一下。打开终端进入项目目录运行：
npm install gulp --save-dev
其中--save-dev是可选的，如果加上则代表你需要将gulp写入到项目package.json文件的依赖中，否则不写入。
3、接下来在项目根目录下创建gulpfile.js文件（必须是这个名字）
1 var gulp = require('gulp'); //- 通过 require()导入gulp 2 3 gulp.task('default', function() { 4 console.log('hello world'); 5 });
4、最后在终端运行gulp
点击回车后你会发现控制台打印出了‘hello world’，这说明gulp引入成功。
gulp API 学习
学习技术当然少不了先了解技术的API文档了，所以我们接下来就学习一个gulp有那么方法。其实使用gulp只需要我们了解4个方法即可。其分别为gulp.task(),gulp.src(),gulp.dest(),gulp.watch();
gulp.task(name[,deps],fn)
gulp.task()是用来定义任务；
name：定义任务名称
deps ：可选参数，当前任务需要依赖的其他任务，为一个数组。如果定义了此参数，那么此任务将会在其他依赖任务都执行完毕后执行。
fn ：定义任务函数，即此任务需要执行的代码。
定义完成以后我们可以在命令行中输入：gulp <--taskname--> 执行此任务。
例如我们在安装步骤3中定义的一个task，其中default为任务名称，后面的function为任务函数。在命令行中输入：gulp default
注意：default 是gulp的默认任务，所以default可以省略不写。
gulp.src(globs[,options])
gulp.src()是获取操作文件流（Streams）。但是需要注意的是这个流并不是原始文件流，而是一个虚拟文件对象流，其中存储原始文件路径、文件名称、内容等。此方法返回一个 Streams。
globs ：文件匹配模式（有点类似于正则表达式）即需要读取文件的url，其作用是匹配文件路径或者文件名；如果有多个匹配模式时，该参数可以为一个数组。
options ：可选参数
举个简单栗子：
1 var gulp=require('gulp'); 2 3 //- 定义任务getFiles 4 gulp.task('getFiles',function(){ 5 gulp.src(['app/index.html','app/js/*.js']); //- 获取app文件夹下的index.html以及所有app/js下的所有.js文件 6 });
关于参数globs，我这里简单的说一下常用的几种：
- +
*：匹配路径中的0个或多个字符，但不匹配路径分隔符及'/'，除非路径分隔符出现在末尾 - +
**：匹配路径中的0个或多个目录及其子目录 - +
? ：匹配路径中的一个字符，但是不匹配路径分隔符 - +
[...]：匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法 - +
!(pattern|pattern)：匹配任何与括号中给定的任一模式都不匹配的 - +
?(pattern|pattern)：匹配括号中给定的任一模式0次或1次，类似于js正则表达式(pattern|pattern)?
- +
+(pattern|pattern)：匹配括号中给定的任一模式至少1次，类似于js正则表达式(pattern|pattern)+
- +
*(pattern|pattern)：匹配括号中给定的任一模式0次或多次，类似于js正则表达式(pattern|pattern)*
- +
@(pattern|pattern)：匹配括号中给定的任一模式1次，类似于js正则表达式(pattern|pattern)
文件匹配栗子如下：
+ * 能匹配 a.js、b/、c，但不能匹配a/b.js
+ *.* 能匹配 a.js,b.css,c.html，但不能匹配a/b.js
+ */*/*.html 能匹配 a/b/c.html，不能匹配a/b.html，a/b/c/d.html
+ **/*.js 能匹配 a.js,a/b.js,a/b/c.js,a/b/c/a.js
+ a/**b/c能匹配 a/b/c,a/ab/c,但不能匹配a/c/b/c
+ ?.js能匹配 a.js,a1.js,b2.js
+ a??能匹配 a.cc,acc,但不能匹配acc/
+ [abc].js只能匹配 a.js,b.js,c.js,不会匹配ab.js,abc.js等
+ [^ab].js能匹配 d.js,e.js等,不能匹配a.js,b.js
globs还可以接受数组，举栗如下：
['app/*.html','!app/a.html']：匹配app路径下所有html，不含app子文件夹中的，但是排除app/a.html。
['app/*.html','!app/a*.html']：匹配app路径下所有html，不含app子文件夹中的，但是排除app下以a开头的html。
globs还有特别指出就是它支持以{}为定界符的写法。举栗如下：
a{b,c}d ：展开结果是abc、acd
a{b,}c ：展开结果是ac、abc
a{0..3}c ：展开结果是a0c、a1c、a2c、a3c
gulp.dest(path[,options])
gulp.dest()方法是生成文件
path ：生成存储路径；这个路径只能指定生成文件的目录，但不能指定文件名。
options ：可选参数
这个方法需要结合上面介绍的gulp.src()一起使用，简单的流程一般是：
(1)、通过gulp.src()获取需要处理的文件流，通过管道方法pipe()导入到gulp插件中；
(2)、插件处理结束后在通过pipe()方法导入到gulp.dest();
(3)、gulp.dest()将文件流写入文件。
举个栗子：
1 var gulp=require('gulp'); 2 //- copy 文件拷贝 3 gulp.task('copy', function () { 4 gulp.src('app/**/*') 5 .pipe(gulp.dest('dist/'));//- 注意此处只是指定生成文件的目录而不是指定生成文件的名称 6 });
gulp.watch(glob[,options],tasks)
gulp.watch()方法是监听文件变化
glob : 文件匹配模式。同gulp.src()中的globs相同
options : 可选参数
tasks : 文件变化后需要执行的任务,是一个数组。
举栗如下：
1 var gulp=require('gulp'); 2 gulp.task('test', function () { 3 console.log('文件有变化！！！'); 4 }); 5 gulp.watch('app/index.html',['test']);
gulp.watch()还有另外一种用法即：
gulp.watch(glob[,options,callback]);
此方法可以监听到文件发生了什么变化。举栗如下：
1 var gulp=require('gulp'); 2 gulp.watch('app/index.html', function (event) { 3 var file = { 4 type: event.type, //- 变化类型 added－添加 deleted－删除 changed－修改 5 path: event.path //- 变化文件路径 6 }; 7 console.log('文件发生改变',file); 8 });
小结：
首先我们了解了gulp的安装；
需要安装nodejs环境，全局安装使用指令：npm install gulp -g
项目中安装gulp使用指令：npm install gulp --save-dev
然后在项目根目录下创建gulpfile.js
其次学习gulp常用的四个方法，分别是：
声明定义gulp任务的gulp.task()；
获取文件流的gulp.src()；
生成文件的gulp.dest()；
监听文件变化的gulp.watch()；
