Gulp常用插件集合

0、前言

  当下最热门的前端构建工具当属gulp和webpack，所谓“工欲善其事，必先利其器”，一个好的构建工具能大大提升开发效率，而好的构建工具往往是由一系列插件组合而成，本篇记录gulp常用插件。

1、gulp常用API

• gulp.src(globs[, options])
  注意：
  1. globs是字符串或数组，表示待处理文件的路径，注意该路径相对于gulpfile.js所在位置；
  2. globs写法中，“app/**/*.js”表示app目录下的任意子目录下的后缀为js的所有文件；

  3. options配置中最常用的是base:'somedir'，指定与不指定base的区别在于处理后的文件的位置。请看下图：

     
     
     

     base的作用
     
     

     指定了base，那么在build中构建后的文件目录结构跟somedir的目录结构相同

• gulp.dest(path[,options])
  注意：
  1. path可以是路径字符串或函数，当是函数时，该函数必须返回字符串；
  2. options中可以配置cwd和mode，用的不多。
• gulp.task(name[, deps], fn)
  1. deps数组，表示前置依赖的任务，即在运行name任务之前运行的任务，一般这些任务是异步的（使用一个 callback，或者返回一个 promise 或 stream），大部分情况下是使用返回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