插件列表

使用Gulp构建项目，需要使用到很多其他NPM插件，下面是我们的项目会使用到的插件列表。

1.整体

gulp

项目构建主插件

rimraf

文件删除接口，主要用户清除构建目录以便于重新构建，支持通配符 rimraf(src)

open

使用浏览器打开网页 open(url)

lazypipe

延迟的管道接口，用户管道处理时，公共方法的提取 lazypipe()

lodash

静态方法库，提供了很多实用的JS方法，如判断对象是否为数组等。项目中推荐使用该工具，其API文档地址为：https://lodash.com/docs。

gulp-load-plugins

自动加载gulp插件的管理插件，避免手动去包含每个插件，可以使用该插件加载所有gulp-前缀的插件。 使用方法：

var $ = require("gulp-load-plugins")();
var gulp = require("gulp");

gulp.task("css", function(){

    gulp.src("src/**/*.css")

        .pipe($.sass({ outputStyle: 'expanded'}).on('error', $.sass.logError))

        .pipe($.if(config.system.compresses, $.minifyCss()))

        .pipe(gulp.dest("build"));
});

加载该组件后，可以通过 $. 格式调用所有gulp-插件，如调用gulp-filter插件的方法，可以使用$.filter() 上面代码中，使用了$.sass()、$.if()、$.minifyCss()，分别对应插件gulp-sass、 gulp-if、 gulp-minify-css， 这几个插件无需显示加载，但需要存在于项目中（即node_modules文件夹中）

gulp-connect

静态服务启动、管理插件

gulp-run-sequence

执行gulp任务插件，使用方法为

var runSequence = require("gulp-run-sequence");
gulp.task("task1", function(){
    console.log("this is task 1.");
})
gulp.task("task2", function(){
    console.log("this is task 2.");
})
gulp.task("task3", function(){
    console.log("this is task 3.");
})

runSequence(['task1', 'task2'], 'task3', ['task4', 'task5'], ....);

task1和task2将会同步执行，执行结束后，task3再执行,以此类推。

gulp-filter

文件过滤插件，如过滤JS后执行JS处理，然后再过滤CSS执行CSS文件处理

gulp-if

条件判断插件 gulpIf(condition, runfunction)

gulp-plumber

统一错误处理插件

gulp-sourcemaps

在JS和CSS中添加map文件地址

2.JS

gulp-babel

JS处理插件，如处理ES6转义为ES5

babel-preset-es2015

ES6转义为ES5

gulp-uglify

JS压缩插件

3.CSS

gulp-sass

SASS转义为CSS

gulp-compass

Compass语法（SASS增强版）转义为CSS插件

gulp-autoprefixer

CSS自动添加浏览器兼容前缀

gulp-minify-css

CSS压缩插件

4.HTML

gulp-inject

自动将JS、CSS插入HTML

wiredep

将bower下的模块插入HTML

gulp-minify-html

HMTL压缩插件

gulp-useref

通过解读HTML中的JS、CSS文件链接对JS、CSS进行合并，然后更新HTML中的文件地址

gulp-rev

自动添加文件版本号

gulp-rev-collector

自动添加文件版本号