0、前言
当下最热门的前端构建工具当属gulp和webpack，所谓“工欲善其事，必先利其器”，一个好的构建工具能大大提升开发效率，而好的构建工具往往是由一系列插件组合而成，本篇记录gulp常用插件。
1、gulp常用API
- gulp.src(globs[, options])
注意：- globs是字符串或数组，表示待处理文件的路径，注意该路径相对于gulpfile.js所在位置；
- globs写法中，“app/**/*.js”表示app目录下的任意子目录下的后缀为js的所有文件；
-
options配置中最常用的是base:'somedir'，指定与不指定base的区别在于处理后的文件的位置。请看下图：
base的作用
指定了base，那么在build中构建后的文件目录结构跟somedir的目录结构相同
- gulp.dest(path[,options])
注意：- path可以是路径字符串或函数，当是函数时，该函数必须返回字符串；
- options中可以配置cwd和mode，用的不多。
- gulp.task(name[, deps], fn)
- deps数组，表示前置依赖的任务，即在运行name任务之前运行的任务，一般这些任务是异步的（使用一个 callback，或者返回一个 promise 或 stream），大部分情况下是使用返回stream的形式来实现异步，更多信息
stream实现异步
- deps数组，表示前置依赖的任务，即在运行name任务之前运行的任务，一般这些任务是异步的（使用一个 callback，或者返回一个 promise 或 stream），大部分情况下是使用返回stream的形式来实现异步，更多信息
- gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
监听文件，一旦文件发生改变就会执行tasks数组中指定的任务，或者执行cb函数，并触发watcher的change事件
2、gulp简单插件
- gulp-imagemin 压缩图片
- gulp-sass 将scss文件转为css
- gulp-postcss 与autoprefixer配合使用
- gulp-open 默认浏览器打开指定页面
- gulp-htmlmin 最小化html文件
- gulp-minify-css 最小化css（gulp-clean-css也是）
- gulp-uglify 混淆js文件
- gulp-concat 合并js,css文件
3、复杂插件
- gulp-replace 对指定文件内容进行替换，可以用正则
- gulp-usemin 将html中外链的css和js文件
- gulp-zip 将文件打包成zip
- gulp-sequence 串行执行任务，相对于gulp.task中依赖的任务是并行执行的
- gulp-rev-all 对js或css文件加MD5戳，缓存用
4、其他node模块
- del 删除指定目录下所有文件
- autoprefixer 自动加浏览器前缀
- browser-sync 文件内容变化浏览器自动刷新
- yargs 处理node命令传入的参数
- cross-env 跨platform的命令处理，用法：cross-env NODE_ENV=production webpack --config build/webpack.config.js，若不加cross-env，window系统下报错
5、注意点
场景：任务A依赖任务B，C
- 1、前置任务B，C是并发执行的
- 2、前置任务B，C执行完毕后才开始执行A
- 3、若想让B，C串行执行，可使用插件gulp-sequ
