前言
以前一直使用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.jsgulp.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/libgulp.src('script/lib/*.js')
// 假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build')); // 生成的文件路径为 build/jquery.js// 如果配置了base参数，此时base路径为scriptgulp.src('script/lib/*.js', {base:'script'})
//假设匹配到的文件为script/lib/jquery.js
.pipe(gulp.dest('build'));// 此时生成的文件路径为 build/lib/jquery.jsgulp.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()是用来监听文件变化的，这样你就可以在开发中实时监测文件的改动，然后自动做出相应的变化，比如压缩，其语法为
gulp.watch(glob [, opts] task)
glob是文件的通配符模式，匹配文件路径，opts是可配置参数，一般不用，task是监听变化后要执行的任务，是一个数组。
gulp.task('uglify',function(){ //do something});
gulp.task('reload',function(){ //do something});
gulp.watch('js/**/*.js', ['uglify','reload']);gulp.watch()还有另一种形式
gulp.watch(glob [, opts] cb)
前两个参数一样，cb是回调函数，监听的文件变化时会调用该方法，方法传递一个参数，该参数带有文件变化的信息，type属性为变化的类型，可以是added，changed，deleted；path属性为发生变化的文件的路径
gulp.watch('js/**/*.js', function(event){ console.log(event.type); //变化类型 added为新增,deleted为删除，changed为改变
console.log(event.path); //变化的文件的路径});gulp常用插件
gulp-rename重命名文件gulp-sass编译scss文件gulp-uglify压缩js文件gulp-concat合并文件，css和jsgulp-htmlmin压缩html文件gulp-autoprefixer编译厂商前缀gulp-clean删除文件gulp-rev根据文件内容生成hash值，做静态资源版本管理gulp-rev-collector替换html中的文件引用，与gulp-rev一起用gulp.spritesmith生成精灵图gulp-load-plugins加载gulp插件，减少require的书写gulp-requirejs-optimize合并打包requirejs的模块引用pump使gulp的文件流往下传递，包括error，如果有一个地方报错，流的传递会停止gulp-util用来在命令中输入参数，给任务传递自定义的参数run-sequence以同步的方式执行异步任务
最后希望本文能帮助初学gulp的朋友理解gulp，参考自《前端构建工具gulpjs的使用介绍及技巧》，谢谢！
作者：朱man
链接：https://www.jianshu.com/p/71cff94b642c
随时随地看视频
