gulp 常用插件

Question

流控制

• event-stream 事件流，不是插件但很有用
• gulp-if 有条件的运行一个 task
• gulp-clone Clone files in memory in a gulp stream 非常有用
• vinyl-source-stream Use conventional text streams at the start of your gulp or vinyl pipelines

AngularJS

• gulp-ng-annotate 注明依赖 for angular
• gulp-ng-html2js html2js for angular
• gulp-angular-extender 为 angular module 添加 dependencies
• gulp-angular-templatecache 将 html 模板缓存到$templateCache 中

文件操作

• gulp-clean 删除文件和目录, 请用 del 来代替它 Example
• gulp-concat 合并文件
• gulp-rename 重命名文件
• gulp-order 对 src 中的文件按照指定顺序进行排序
• gulp-filter 过滤文件 非常有用 Example
• gulp-flatten 当拷贝文件时，不想拷贝目录时使用 segmentfault

压缩

• gulp-minify-css 压缩 css
• gulp-uglify 用 uglify 压缩 js
• gulp-imagemin 压缩图片
• gulp-minify-html 压缩 html
• gulp-csso 优化 CSS

工具

• gulp-load-plugins 自动导入 gulp plugin
• gulp-load-utils 增强版 gulp-utils
• gulp-task-listing 快速显示 gulp task 列表
• gulp-help 为 task 添加帮助描述
• gulp-jsdoc 生成 JS 文档
• gulp-plumber Prevent pipe breaking caused by errors from gulp plugins Example
• yargs 处理 process.argv
• run-sequence 顺序执行 gulp task，gulp 4.0 已经支持该功能 gulp.series(...tasks)
• gulp-notify gulp plugin to send messages based on Vinyl Files
• gulp-shell 非常有用
• gulp-grunt 在 gulp 中运行 grunt task

JS/CSS 自动注入

• gulp-usemin Replaces references to non-optimized scripts or stylesheets into a set of HTML files
• gulp-inject 在 HTML 中自动添加 style 和 script 标签 Example
• wiredep 将 bower 依赖自动写到 index.html 中 Example
• gulp-useref 功能类似与 usemin Example 新版本用法有变化，详见 gulp-useref 的 README.md

代码同步

• browser-sync 自动同步浏览器，结合 gulp.watch 方法一起使用 Example 1 Example 2
• gulp-nodemon server 端代码同步

Transpilation

• gulp-babel 将 ES6 代码编译成 ES5 Example
• babelify Browserify transform for Babel
• gulp-traceur Traceur is a JavaScript.next-to-JavaScript-of-today compiler

打包

• gulp-browserify 用它和 babelify 实现 ES6 module Example

编译

• gulp-less 处理 less Example
• gulp-sass 处理 sass

代码分析

• gulp-jshint JSHint 检查 Example
• gulp-jscs 检查 JS 代码风格 Example

特别推荐

• gulp-changed 只传输修改过的文件
• gulp-cached 将文件先 cache 起来，先不进行操作
• gulp-remember 和 gulp-cached 一块使用
• gulp-newer pass through newer source files only, supports many:1 source:dest

其他

• webpack-stream gulp 与 webpack Example
• gulp-autoprefixer Prefix CSS
• gulp-sourcemaps 生成 source map 文件
• gulp-rev Static asset revisioning by appending content hash to filenames: unicorn.css → unicorn-d41d8cd98f.css
• gulp-rev-replace Example
• gulp-iconfont 制作 iconfont Example
• gulp-svg-symbols 制作 SVG Symbols, 关于使用 SVG Symbol
• gulp-template 模板替换
• gulp-dom-src 将 html 中的 script，link 等标签中的文件转成 gulp stream。
• gulp-cheerio Manipulate HTML and XML files with Cheerio in Gulp.
• require-dir 利用它我们可以将 gulpfile.js 分成多个文件，具体用法可以参考这个 Splitting a gulpfile into multiple files
• gulp-nodemon 强烈推荐, 监控你的 node 应用,并重现启动 server