前言

以前一直使用Grunt作为前端自动化构建工具，但始终觉得配置繁琐，在之后一个项目中便决定使用更流行的构建工具

这时我们的目录结构为
├── 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.js

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

3、gulp.task()

gulp.task()是用来定义任务的，内部使用的是

最终的结果是先打印'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和js

• gulp-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