Gulp的安装使用与API详解 Gulp的安装使用与API详解

前言以前一直使用Grunt作为前端自动化构建工具，但始终觉得配置繁琐，在之后一个项目中便决定使用更流行的构建工具Gulp。因为Gulp使用node的stream流进行文件和数据的读取操作，能减少I/O次数，速度更快，主要API只有4个，易上手。下面我们来详细学习一下Gulp这个工具吧。
安装确保你已经安装好了node环境，首先全局安装gulp

npm install -g gulp

然后切换路径到你项目的package.json文件所在目录下，本地安装gulp

npm install gulp --save-dev

为什么要安装两次呢？因为全局安装是方便你直接使用gulp命令，而本地安装是因为之后需要安装的gulp插件需要依赖gulp。主要是为了灵活，不用太纠结。
开始使用gulp 与grunt依赖一个Gruntfile.js一样，gulp也依赖一个主文件gulpfile.js，这个文件主要定义了gulp的一些任务。我们可以进入项目package.json文件所在目录，一般是根目录，创建一个js文件并命名为gulpfile.js，然后写入一个最简单的任务，例如：

var gulp = require('gulp'); gulp.task('default',function(){ console.log('hello world'); });

这时我们的目录结构为
├── gulpfile.js
├── node_modules
│ └── gulp
└── package.json
在终端运行命令gulp便可看到终端打印一句hello world。你可以给任务一个特定的名字，然后运行特定任务，如gulp build，如果没有指定任务则自动执行default任务。
API介绍搭建好工具后就要写入一些任务为项目服务了，gulp的任务编写就跟写js一样，主要API只有4个gulp.src()、gulp.dest()、gulp.task()、gulp.watch()，易于掌握，下面主要介绍一些易理解偏差的点，所以大家还是先看一遍官网的介绍。
1、gulp.scr() 在gulp中使用的是node的stream流，首先获取到stream，然后通过stream的pipe()方法把流导向你想要的地方，而gulp.src()方法就是获取流的。但这个并不是原本的文件流，而是封装过后的虚拟文件对象流(Vinyl files)，带有原始文件的名称、路径、内容等信息。该方法的语法为：

gulp.src(globs [, options])

globs是文件匹配模式(类似正则匹配)，用来匹配文件路径，也可以直接指定某个具体的文件路径，如果有多组匹配模式可以使用数组形式。options是一个可选参数。
下面介绍一下globs的匹配规则：

* 匹配文件路径中的0个或多个字符，但不会匹配路径分隔符，除非路径分隔符出现在末尾。
** 匹配路径中的0个或多个目录及其子目录，需要单独出现，即它左右不能有其他东西了。如果出现在末尾，也能匹配文件。
? 匹配文件路径中的一个字符(不会匹配路径分隔符)。
[...] 匹配方括号中出现的字符中的任意一个，当方括号中第一个字符为^或!时，则表示不匹配方括号中出现的其他字符中的任意一个，类似js正则表达式中的用法。
!(pattern|pattern|pattern) 匹配与括号中给定的任一模式都不匹配的字符。
?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次。
+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次。
*(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次。
@(pattern|pattern|pattern) 匹配括号中给定的任一模式1次。

当有多组匹配模式时，可以使用数组

gulp.src(['static/**/*.js', 'static/**/*.css', 'static/**/*.html'])

使用数组的好处在于能使用!进行排除某些模式，但注意!不能为数组的第一个字符

gulp.src(['static/**/*.js', '!static/module/*.js'])

2、gulp.dest() gulp.dest()方法是用来写文件的，语法如下：

gulp.dest(path [, options])

path是路径参数，options是可选参数，一般用不到。
如果想用好这个方法，就要理解好文件传入路径与传出路径的关系。gulp的工作流程是通过src()获取指定路径下的文件流，通过pipe()导到某些gulp插件中处理，完成后通过pipe()导到dest()中，最后写到指定的目录下。

这里重要的一点是，gulp.dest()的路径参数只能指定生成文件的目录路径名称，不能指定生成文件的文件名称，而文件名称是由传入的文件流名称决定的。

var gulp = require('gulp'); gulp.src('script/jquery.js') .pipe(gulp.dest('dist/foo.js')); //最终生成的文件路径为 dist/foo.js/jquery.js,而不是dist/foo.js

如果想改变文件名称可以使用其他gulp插件完成。

另一点是gulp.dest()生成的路径是由path参数加上gulp.src()文件匹配路径的通配符开始出现后的部分组成，举例说明：

var gulp = require('gulp'); // 如果匹配到的文件是static/js/me/me.js gulp.src('static/js/**/*.js') // 由于通配符出现的部分是**/*.js，所以导出的文件路径是dist/js/me/me.js .pipe(gulp.dest('dist/js'));

再比如

gulp.src('script/avalon/avalon.js') //没有通配符出现的情况 .pipe(gulp.dest('dist')); //最后生成的文件路径为 dist/avalon.js

通过设置gulp.src()的base参数，可以灵活的修改gulp.dest()生成的路径，如果没有设置则base参数默认是指传入路径匹配模式通配符出现前的部分，比如：

gulp.src('app/src/**/*.css') //此时base的值为 app/src

所以上面的说法可以理解为，gulp.dest()生成的路径是path参数替换传入文件路径的base部分，修改base参数就可以修改生成文件路径，比如：

// 没有配置base参数，此时默认的base路径为script/lib gulp.src('script/lib/*.js') // 假设匹配到的文件为script/lib/jquery.js .pipe(gulp.dest('build')); // 生成的文件路径为 build/jquery.js// 如果配置了base参数，此时base路径为script gulp.src('script/lib/*.js', {base:'script'}) //假设匹配到的文件为script/lib/jquery.js .pipe(gulp.dest('build')); // 此时生成的文件路径为 build/lib/jquery.js

gulp.dest()把文件流写入文件后，文件流还能导入其他插件继续使用

3、gulp.task() gulp.task()是用来定义任务的，内部使用的是Orchestrator，一个以最大并发排列和运行任务和依赖的模块，task的语法为：

gulp.task(name [, deps] fn)

name是定义的任务名，deps是任务依赖的其他任务，是一个数组的形式，定义的任务会在依赖的任务执行完成后再执行，如果没有依赖任务可以省略，fn是任务具体执行的操作，该参数也是可选的。
在gulp.task()中执行多个任务，可以通过依赖来完成，比如要执行default任务时，还要执行one、two、three三个任务，可以这样写

// 这样one tow three三个任务都被执行了 gulp.task('default', ['one', 'two', 'three'], function() { // do something })

如果任务相互间没有依赖，则任务会按照你写的顺序执行，如果有依赖则先执行依赖的任务。但如果某个依赖的任务是异步的，那gulp不会等待这个异步任务执行完，而会继续执行后面的任务。例如：

gulp.task('one',function(){ //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done') },5000); }); //two任务虽然依赖于one任务,但并不会等到one任务中的异步操作完成后再执行 gulp.task('two',['one'],function(){ console.log('two is done'); });

最终的结果是先打印'two is done'，然后再打印'one is done'。
那我们如何实现异步任务同步的功能呢，请看另一篇文章《以同步的方式运行 Gulp 任务和任务中的步骤》。
4、gulp.watch() gulp.watch()是用来监听文件变化的，这样你就可以在开发中实时监测文件的改动，然后自动做出相应的变化，比如压缩，其语法为