gulp插件实战

自从开始做 angularJS 项目以来，对gulp使用变得十分频繁。实际的开发体验就是非常方便，构建代码，本地调试变得十分快捷。看了一下 packjson 将近十种插件。使用的过程中有很多坑，在此写下来，为了以后少踩坑。

1.什么是gulp？

gulp是目前最火的前端构建工具之一，在 npm 上也是最火的工具之一。它的出现让前端开发变得十分方便。它和 webpack 不太一样，它属于流式处理文件，简单清晰。配置文件也是十分简单，webpack 的配置文件，大家看的往往会头疼。
安装 gulp 十分简单。
npm install gulp -g

2. 5个主要的API

• gulp.task()
  task,顾名思义，就是新建一个 gulp 任务。使用的话直接
  gulp.task('任务名'，function（）{ ...... })
  执行任务使用 gulp 任务名 即可
• gulp.src()
  可以理解为读取文件，和 webpack entry类似。
• gulp.watch()
  监视文件，熟悉命令行的朋友应该不会陌生，很多指令都有 -w的命令。
• gup.dest()
  处理过后的文件放在哪，是这个 api 决定的。
• gulp.pipe()
  处理过程，每一个步处理都通过这个 api 处理，一步一步向下走。

3. 常用的 gulp 插件

（1）. gulp-usemin

  //合并插件

现在文件中注释，然后直接使用即可。

（2）. gulp-load-plugins

顾名思义就是一个快速加载 gulp 插件的插件。
$ = require('gulp-load-plugins')();
别忘后边的括号！
$.usemin()
像这样不用require插件，直接使用即可。

（3）.gulp-connect

快速创建一个本地服务器
gulp.task('server', function () { $.connect.server({ root: './build/', port: 9003, livereload: false, });
指定根目录，端口，实时重载即可。

（4）.gulp-plumber

任务出错不中断插件，让你不用一直重启项目。很实用！

（5）. wrench

按理说不属于 gulp 插件，但是配合 gulp 使用，可以把所有的 gulp 任务全部独立出来，方便项目管理和查错。
使用比较简单
在 gulpfile.js 中 wrench = require('wrench');
wrench.readdirSyncRecursive('./gulp').filter(function (file) { return (/\.(js)$/i).test(file); }).map(function (file) { require('./gulp/' + file); });

入口为你的所有 gulp 任务文件夹即可

（6）. gulp-rev、gulp-rev-collector

添加版本号的插件，在文件尾部添加哈希值，防止缓存。同时它会生成一个映射表。
gulp.task('revCSS', () => { return gulp.src('./dev/css/*.css') .pipe($.rev()) .pipe(gulp.dest('./build/css')) .pipe($.rev.manifest()) .pipe(gulp.dest('./rev/css')); });
gulp.task('revJS', () => { return gulp.src(['./dev/js/app.js', './dev/js/base.js', './dev/js/vendors.js']) .pipe($.rev()) .pipe(gulp.dest('./build/js')) .pipe($.rev.manifest()) .pipe(gulp.dest('./rev/js')); });

gulp.task('revCollectorHtml', () => { return gulp.src(['./rev/**/*.json', './dev/index.html']) .pipe($.revCollector()) .pipe(gulp.dest('./build')); });

（7）. run-sequence

runSequence = require('run-sequence');
同样，这也不算一个 gulp插件，但是配合 gulp 使用可以把一些任务编队，顺序执行。
gulp.task('build', function (done) { runSequence( ['clean:dev', 'clean:build'], ['usemin:dev'], ['webpack:build'], ['copy:dev'], ['revCSS', 'revJS'], ['revCollectorHtml'], done ); })

还有常用的如 gulp-unify、gulp-minifyCss、gulp-concat等等非常常见就不做介绍了。

4.使用 gulp 要注意的问题

gulp.task('任务名',funciton(){ return //记得return，异步加载任务，不出错。 })

gulp.task('watch',['clean'] ,function () { gulp.watch('./src/*.html', ['usemin:dev']); });
这种写法是指，在clean任务之后执行 watch，同步执行。

可以用 gulp 执行 webpack
let webpack = require('webpack'), gulp = require('gulp'), $ = require('gulp-load-plugins')(), webpackStream = require('webpack-stream');

//js构建任务 gulp.task('webpack:dev', () => { return gulp.src('./src/app/app.js') .pipe($.plumber()) .pipe(webpackStream(require('./webpack.config.dev.js'), webpack)) .pipe(gulp.dest('./dev')); });

//js构建任务 gulp.task('webpack:build', () => { return gulp.src('./src/app/app.js') .pipe($.plumber()) .pipe(webpackStream(require('./webpack.config.build.js'), webpack)) .pipe(gulp.dest('./dev')); });