gulp常用插件介绍

gulp是基于流的前端自动构建工具，那gulp有什么优点呢，可以用三个字形容：自动化。下面就介绍一些有用的插件吧。

一 、工具类

gulp-load-plugins

根据名字可以知道它的作用是自动require你在package.json中的插件:

// package.json 

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.1"
}

// gulpfile.js

var $ = require('gulp-load-plugins')();     // $ 是一个对象,加载了依赖里的gulp- 或者 gulp.插件

gulp.src('./**/*.js')               
    .pipe($.concat('all.js'))               // 使用插件就可以用$.PluginsName()
    .pipe($.uglify())    // 使用驼峰命名法 如 $.ngAnnotate: "gulp-ng-annotate"
    .pipe($.rename('all.min.js'))
    .pipe(gulp.dest('./dist'))

这个插件还有参数配置，具体见文档。是不是很方便呢

yargs

这个插件严格来说并不是专门用于gulp，它是Node中处理命令行参数的通用解决方案，只要一句代码 var args = require('yargs').argv;就可以让命令行的参数都放在变量args上，可以根据参数判断是测试环境还是正式环境。

• 单字符的简单参数，如传入-m=5或-m 5，则可得到args.m = 5
• 多字符参数（必须使用双连字符），如传入--test=5或--test 5，则可得到args.test = 5。
• 不带值的参数，如传入--production，则会被认为是布尔类型的参数，可得到args.production = true。

gulp-util

gulp-util带有很多方便的函数，其中最常用的应该就是log了。var gutil = require('gulp-util');支持传入多个参数，打印结果会将多个参数用空格连接起来。console.log的区别就是所有gutil.log的结果会自动带上时间前缀。另外，它还支持颜色，如gutil.log(gutil.colors.red('test'));打印出来的test是红色的。其实gutil.colors就是一个chalk的实例，而chalk是专门用来处理命令行打印着色的一个工具。

del

删除文件及文件夹

var del = require('del');

del('./dist');                      // 删除整个dist文件夹

二 、stream类

gulp-filter

gulp-filter可以把stream里的文件根据一定的规则进行筛选过滤。比如gulp.src中传入匹配符匹配了很多文件，可以把这些文件pipe给gulp-filter作二次筛选，如gulp.src('**/*.js').pipe($.filter(**/a/*.js))，本来选中了所有子文件下的js文件，经过筛选后变成名为a的子文件夹下的js文件。那有人要问了，为什么不直接将需要的筛选传入gulp.src，干嘛要多筛选一步呢？这里面有两种情况：

• gulp.src与$.filter中间可能需要别的处理，比如我对所有文件做了操作1以后，还需要筛选出一部分做操作2。
• 第二种情况就要谈到gulp-filter的另外一个特性：筛选之后还可以restore回去。比如我对所有文件做了操作1，筛选了一部分做操作2，最后要把所有的文件都拷贝到最终的位置。代码如下：

var filter = $.filter('**/a/*.js', { restore: true });
gulp.src('**/*.js')
    .pipe(action1())
    .pipe(filter)
    .pipe(action2())
    .pipe(filter.restore())
    .pipe(gulp.dest('dist'))

可以看到，如果没有restore这个操作，那么拷贝到最终位置的文件将只包含被过滤出来的文件，这样一restore，所有的文件都被拷贝了。

gulp-flatten

flatten 变平。比如gulp.src('*/.js')匹配了很多文件，包括a/b/c.js，d/e.js，f/g/h/i/j/k.js，l.js，这些文件的层级都不一样，一旦我们将这个文件pipe给$.flatten()，则所有的文件夹层级都会去掉，最终的文件将是c.js，e.js，k.js，l.js，在一些场景下还是非常有用的。

三、inject类

这个部分主要介绍一些将JS/CSS自动插入到HTML的相关插件。

wiredep

它的作用就是把bower.json中声明的dependence自动的包含到HTML中去。要插入文件，wiredep需要解决两个问题：

• 插入的位置：wiredep通过识别HTML中的注释来识别插入位置，如

不同类型的文件被插入到不同的区块。

• 插入什么文件：要插入的文件列表自然来自bower.json，每个bower安装的依赖库，根目录下边都有一个自己的bower.json文件，其中的main字段指明了使用这个库需要包含的文件，wiredep最终包含的文件列表就来自这个字段。有些情况下，库自身的bower.json的main字段可能会多包含文件或少包含文件，如果想要定制这个列表，则可以在自己的bower.json中使用overrides字段，如下面的代码覆盖了bootstrap-sass这个库的main字段。

"overrides": {
    "bootstrap-sass": {
      "main": [
        "assets/stylesheets/_bootstrap.scss",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
        "assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
      ]
    }
}

wiredep插件支持很多参数，常用的主要有两个：

• exclude: 不包括的文件 如 exclude: [/jquery/, /\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/bootstrap\.css/]
• directory：指定存放bower安装后的依赖包的路径，通常是bower_components。如directory: 'bower_components'。
  使用wiredep也比较简单，直接把它传入到stream中即可，如gulp.src('index.html').pipe(wiredep({directory: 'bower_components'}))。

gulp-inject

这个插件的作用与wiredep类似，不同的是可以自己任意指定需要插入文件的列表。它同样是利用注释来寻找插入的位置，它识别的默认注释为，但更加智能：

• 支持各种模板语言：可以根据gulp.src指定的源文件自动识别注释和插入内容，除了支持HTML外，还支持jade、haml等。若源为jade文件，则识别的注释为//- inject:js，插入的内容为：script(src=".js")。
• 配置非常灵活：
  • name：默认识别的注释标签格式为，这里的name默认值就是“inject”，而ext的默认值是要插入的文件的扩展名。那么name属性可配置意味着可以添加自定义的插入区块，如，这个标签可以只插入生产环境需要包含的JS文件。
  • starttag和endtag：支持自定义需要识别的注释内容。
  • addPrefix和addSuffix：支持在插入文件的路径上自定义前缀、后缀。
  • relative：指定插入文件的路径是否为相对路径。
  • ingorePath：指定插入文件的路径前面会忽略掉指定的路径。
  • read：这个参数通常给false，不需要真正的去读取文件。

这个插件的使用场景通常是，我们需要index里有多个区块，比如上面name的例子，只有当为production环境编译的时候才去包含相关的文件。

gulp-useref 与 gulp-rev、gulp-rev-replace

这三个工具之所以放在一起讲，是因为它们一般都是一起使用的。它们要解决什么问题呢？通过上面的wiredep也好，gulp-inject也好，插入了一堆JS、CSS文件到HTML中，一旦部署到生产环境，这么多文件必然是要合并压缩的。光是压缩还不够，为了解决缓存问题，每次合并压缩后要给最终的文件加hash，这样每次文件内容一变动，hash也会跟着变动，就不存在浏览器依然使用缓存的老文件的问题。这样得到最终的文件以后，肯定还要将这个文件替换回HTML中去，一大堆的script和link标签替换成最终合并压缩带hash的版本。

前面啰啰嗦嗦的一大堆工作就是这三个插件要解决的问题了。首先，gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的所有文件进行合并。注意：它只负责合并，不负责压缩！所以合并出来的文件我们要自行压缩，压缩以后调用gulp-rev负责在文件名后追加hash。最后调用gulp-rev-replace负责把最终的文件名替换回HTML中去。扯了大半天，还是直接上例子吧。先来看看HTML中的注释：

gulp-useref识别的就是build开头的注释，build后面首先跟的是类型扩展名，然后是要被替换掉的要合并的文件路径，如果有多个，用对象表示，不填为默认路径。再后面的路径就是build区块中的所有文件进行合并后的文件路径，这个相对路径是相对于这个HTML的路径。上面的例子中我们用build区块把bower和inject进来的文件包起来，这些文件就可以被gulp-useref合并了。再来看gulp中useref相关task的定义：

    var htmlFilter = $.filter('*.html', {restore: true, dot: true});
    var jsFilter = $.filter('**/*.js', {restore: true, dot: true});
    var cssFilter = $.filter('**/*.css', {restore: true, dot: true});

    return gulp
        .src(path.join(conf.paths.tmp, '/serve/*.html'))
        .pipe($.useref())
        .pipe(jsFilter)
        .pipe($.sourcemaps.init())  // http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html
        .pipe($.ngAnnotate()) // http://hicc.me/minify-concat-angular-js-with-gulp/
        .pipe($.uglify()).on('error', conf.errorHandler('Uglify'))
        .pipe($.sourcemaps.write('maps'))
        .pipe($.rev())
        .pipe(jsFilter.restore)
        .pipe(cssFilter)
        .pipe($.sourcemaps.init())
        .pipe($.replace('../../../bower_components/bootstrap-sass/assets/fonts/bootstrap/', '../fonts/'))
        .pipe($.csso())
        .pipe($.sourcemaps.write('maps'))
        .pipe($.rev())
        .pipe(cssFilter.restore)
        .pipe($.revReplace())
        .pipe(htmlFilter)
        .pipe($.htmlmin({
            removeEmptyAttributes: true,
            removeAttributeQuotes: true,
            collapseBooleanAttributes: true,
            collapseWhitespace: true
        }))
        .pipe(htmlFilter.restore)
        .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
        .pipe($.size({title: path.join(conf.paths.dist, '/'), showFiles: true}));

我们来逐个分析一下，首先获取文件index.html，然后用$.useref()进行文件的合并，输出流有

• .tmp/serve/index.html
• .tmp/serve/styles/app.css
• .tmp/serve/styles/vendor.css
• .tmp/serve/scripts/vendor.js
• .tmp/serve/scripts/app.js

这里我们发现就是HTML中4个build注释块后面的4个文件，然后filter出js文件，然后生成sourcemap，j继续用$.ngAnnotate()处理angularjs的依赖注入，再压缩js，后面调用gulp-rev给压缩后的文件加hash，然后调用restore()将src源换回HTML文件进行下一步的filter操作，值得注意的是后面调用gulp-rev-replace将带hash的文件替换回HTML，gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest.json后替换对应的文件名称。