gulp常用插件整理

任务管理

gulp-nodemon

网址: https://www.npmjs.com/package/gulp-nodemon
说明：自动启动/重启你的node程序，开发node服务端程序必备。

gulp-task-listing

网址: https://www.npmjs.com/package/gulp-task-listing
说明：打印出gulpfile.js中定义的所有task。

require-dir

网址: https://www.npmjs.com/package/require-dir
说明：分离任务到多个文件中。

run-sequence

网址: https://www.npmjs.com/package/run-sequence
说明：让gulp任务，可以相互独立，解除任务间的依赖，增强task复用。

yargs

网址: https://www.npmjs.com/package/yargs
说明：用于获取启动参数，针对不同参数，切换任务执行过程时需要。

util工具类

gulp-util

网址: https://www.npmjs.com/package/gulp-util
说明：gulp常用的工具库。

gulp-load-plugins

网址：https://www.npmjs.com/package/gulp-load-plugins
说明：自动加载插件。

自动刷新

gulp-connect

网址: https://www.npmjs.com/package/gulp-connect
说明：前端数据模拟服务器，同时也支持浏览器自动刷新。

browser-sync

网址: http://www.browsersync.io/
说明：静态文件服务器，同时也支持浏览器自动刷新，它能实现LiveReload所有功能。

gulp-livereload

网址：https://www.npmjs.com/package/gulp-load-plugins
说明：自动刷新。

编译类

gulp-base64

网址：https://www.npmjs.com/package/gulp-base64
说明：把小图片转成base64字符串。

gulp-babel

网址：https://www.npmjs.com/package/gulp-babel
说明：让ES6编写的JavaScript代码转化成浏览器可以理解的JavaScript代码。使用 babel 编译 JS 文件，比如将ES6代码编译成ES5。

gulp-less

网址：https://www.npmjs.com/package/gulp-less
说明：将less文件编译成css,当有less文件发生改变自动编译less,并保证less语法错误或出现异常时能正常工作并提示错误信息。

gulp-sass

网址：https://www.npmjs.com/package/gulp-sass
说明：把 Sass 编译成 CSS。

gulp-postcss

网址：https://www.npmjs.com/package/gulp-postcss
说明：把 postcss 编译成 CSS。

gulp-coffee

网址: https://github.com/wearefractal/gulp-coffee
说明：编译coffee代码为Js代码，使用coffeescript必备。

gulp-sourcemaps

网址：https://www.npmjs.com/package/gulp-sourcemaps
说明：处理JS时，生成SourceMap。

压缩优化类

gulp-uglify

网址：https://www.npmjs.com/package/gulp-uglify
说明：用来混淆、压缩js文件，使用的是uglify引擎。

gulp-minify

网址：https://www.npmjs.com/package/gulp-minify
说明：压缩js文件,推荐使用gulp-uglify，Minify JavaScript with UglifyJS2.。

gulp-minify-inline-scripts

网址：https://www.npmjs.com/package/gulp-minify-inline-scripts
说明：压缩行内脚本。

gulp-minify-css

网址：https://www.npmjs.com/package/gulp-minify-css
说明：css文件压缩，gulp-minify-css已经被废弃，请使用gulp-clean-css。

gulp-clean-css

网址：https://www.npmjs.com/package/gulp-clean-css
说明：css文件进行去注释,css文件压缩。

gulp-csso

网址：https://www.npmjs.com/package/gulp-csso
说明：压缩优化css。

gulp-uncss

网址：https://www.npmjs.com/package/gulp-uncss
说明：清理多余无用css。

gulp-useref

网址：https://www.npmjs.com/package/gulp-useref
说明：解析构建块在HTML文件来代替引用未经优化的脚本和样式表。

gulp-html-replace

网址：https://www.npmjs.com/package/gulp-html-replace
说明：替换html中的构建块。Replace build blocks in HTML. Like useref but done right.

gulp-minify-html

网址：https://www.npmjs.com/package/gulp-minify-html
说明：html文件压缩，已废弃，推荐使用gulp-htmlmin。

gulp-htmlmin

网址：https://github.com/jonschlinkert/gulp-htmlmin
说明：html文件压缩,如去换行，去注释等。

jsonminify

网址：https://www.npmjs.com/package/jsonminify
说明：Json压缩

gulp-pretty-data

网址：https://www.npmjs.com/package/gulp-pretty-data
说明：压缩美化xml, json, css, sql。

gulp-image

网址：https://www.npmjs.com/package/gulp-image
说明：图片压缩。

gulp-imagemin

网址：https://www.npmjs.com/package/gulp-imagemin
说明：图片压缩,对jpg、png等格式问的图片进行无损的压缩（特别有用，但是在你的node-modules中的插件过多时会存在图片压缩过慢的问题问题）。

imagemin-pngquant

网址：https://www.npmjs.com/package/imagemin-pngquant
说明：图片压缩。

gulp-zip

网址：https://www.npmjs.com/package/gulp-zip
说明：ZIP压缩文件。

css sprites 图片精灵

gulp.spritesmith

网址：https://www.npmjs.com/package/gulp.spritesmith
说明：Convert a set of images into a spritesheet and CSS variables via gulp.

gulp.spritesmith-multi

网址：https://www.npmjs.com/package/gulp.spritesmith-multi
说明：A wrapper for gulp.spritesmith to generate multiple sprites and stylesheets.

gulp-sprite-generator

网址：https://www.npmjs.com/package/gulp-sprite-generator
说明：Plugin that generate sprites from your stylesheets (using spritesmith) and then updates image references.

gulp-spritesmith

网址：https://www.npmjs.com/package/gulp-spritesmith
说明：Gulp plugin for sprite generation, based on spritesmith.

文件类

del

网址：https://www.npmjs.com/package/del
说明：删除文件/文件夹。

gulp-clean

网址：https://www.npmjs.com/package/gulp-clean
说明：删除文件/文件夹。

gulp-concat

网址：https://www.npmjs.com/package/gulp-concat
说明：文件合并，合并JS。

gulp-recursive-concat

网址：https://www.npmjs.com/package/gulp-recursive-concat
说明：按文件夹递归合并JS。

gulp-rename

网址：https://www.npmjs.com/package/gulp-rename
说明：用来重命名文件流中的文件。

gulp-filter

网址：https://www.npmjs.com/package/gulp-filter
说明：在虚拟文件流中过滤文件。

代码审查、自动补全

gulp-eslint

网址：https://www.npmjs.com/package/gulp-eslint
说明：检查Javascript编程时的语法错误，与gulp-jshint二选一即可。

gulp-jshint

网址：https://www.npmjs.com/package/gulp-jshint
说明：js代码检查，与gulp-eslint二选一即可。

gulp-autoprefixer

网址：https://www.npmjs.com/package/gulp-autoprefixer
说明：使用Autoprefixer来补全浏览器兼容的css，与autoprefixer功能相同，二选一即可。

autoprefixer

网址：https://www.npmjs.com/package/autoprefixer
说明：自动添加浏览器前缀,补全浏览器兼容的css。

注释类

gulp-header

网址：https://www.npmjs.com/package/gulp-header
说明：用来在压缩后的JS、CSS文件中添加头部注释，你可以包含任意想要的信息，通常就是作者、描述、版本号、license等，比如

function getHeader () {
    var pkg = require('package.json');
    var template = ['/**',
        ' * <%= pkg.name %> - <%= pkg.description %>',
        ' * @authors <%= pkg.authors %>',
        ' * @version v<%= pkg.version %>',
        ' * @link <%= pkg.homepage %>',
        ' * @license <%= pkg.license %>',
        ' */',
        ''
    ].join('\n');
    return $.header(template, {
        pkg: pkg
    });
}

gulp-footer

网址：https://www.npmjs.com/package/gulp-footer
说明：用来在压缩后的JS、CSS文件中添加页脚注释。

自动加版本号

gulp-make-css-url-version

网址：https://www.npmjs.com/package/gulp-make-css-url-version
说明：默认是取图片文件的md5值作为版本号。

gulp-rev

网址：https://www.npmjs.com/package/gulp-rev
说明：对文件进行hash命名，并且生成对应的json文件(对css、js文件名加MD5后缀)，配合gulp-rev-collector使用。

gulp-rev-collector

网址：https://www.npmjs.com/package/gulp-rev-collector
说明：结合gulp-rev对hash的文件在html文件中进行引用路径更改,替换html中的链接，配合gulp-rev使用。

gulp-rev-format

网址：https://github.com/atamas101/gulp-rev-format
说明：格式化文件版本号，需配合gulp-rev使用。

单位转换

postcss-px2rem

网址：https://www.npmjs.com/package/postcss-px2rem
说明：px单位转换成rem单位

流控制

gulp-if

网址：https://www.npmjs.com/package/gulp-if
说明：有条件地运行一个任务。

调试

gulp-debug

网址：https://www.npmjs.com/package/gulp-debug
说明：gulp脚本调试。

gulp-debug-streams

网址：https://www.npmjs.com/package/gulp-debug-streams
说明：gulp脚本调试。

gutil-waterlog

网址：https://www.npmjs.com/package/gutil-waterlog
说明：gulp任务日志。

gulp-logwarn

网址：https://www.npmjs.com/package/gulp-logwarn
说明：gulp任务日志。

gulp-spy

网址：https://www.npmjs.com/package/gulp-spy
说明：gulp脚本调试。

gulp-plumber：错误处理插件

网址：https://www.npmjs.com/package/gulp-plumber
说明：使用watch模式可以更高效的开发，监听到改动就自动执行任务，但是如果过程中遇到错误，gulp就会报错并终止watch模式，必须重新启动gulp，利用gulp-plumber可以实现错误自启动。

gulp-notify：消息插件

网址：https://www.npmjs.com/package/gulp-notify
说明：显示报错信息和报错后不终止当前gulp任务。

增量编译

gulp-cache

网址：https://www.npmjs.com/package/gulp-cache
说明：检测改动的文件,图片缓存，只有图片替换了才压缩

gulp-cached

网址：https://www.npmjs.com/package/gulp-cached
说明：增量编译打包,对文件进行复制时，只是对那行更改过的文件进行复制，减少不必要的资源操作。

gulp-remember

网址：https://www.npmjs.com/package/gulp-remember
说明：配合gulp-cached使用。

gulp-changed

网址：https://www.npmjs.com/package/gulp-changed
说明：只编译或打包改变过文件 ，大大加快了gulp task的执行速度,跟gulp-cacahed插件类似，主要是在对文件进行复制时，如果该文件没有改动过，那么就不允许该文件复制到目标文件件。（实测时看不出来，如果使用cached,就不用使用这个了）。
实际开发中用 gulp-cached+gulp-remember 的组合非常合适。

项目模板化

gulp-data

网址：https://www.npmjs.com/package/gulp-data
说明：提供数据，该数据可被其他gulp插件使用。

gulp-template

网址：https://www.npmjs.com/package/gulp-template
说明：渲染模板，替换变量以及动态html。

gulp-file-include

网址：https://www.npmjs.com/package/gulp-file-include
说明：include 文件。

文件目录

gulp-recursive-folder

网址：https://www.npmjs.com/package/gulp-recursive-folder
说明：Gulp plugin that work with folders treat them recursively。

gulp-folders

网址：https://www.npmjs.com/package/gulp-folders
说明：Gulp plugin that lets you work with folders and treat them as package names。

格式化

gulp-jsbeautifier

网址：https://www.npmjs.com/package/gulp-jsbeautifier
说明：Prettify JavaScript, JSON, HTML and CSS.

gulp-beautify

网址：https://www.npmjs.com/package/gulp-beautify
说明：This is a gulp plugin for js-beautify.

gulp-group-css-media-queries

网址：https://www.npmjs.com/package/gulp-group-css-media-queries
说明：格式化css媒体查询语句。

环境变量

fuck-env

网址：https://www.npmjs.com/package/fuck-env
说明：用于跨平台设置脚本环境变量，支持 .env 类型文件和 package.json 的 config 字段。

其他插件

pretty-error

网址：https://www.npmjs.com/package/pretty-error
说明：一个小工具，美化node.js错误提示。

gulp-stats

网址：https://www.npmjs.com/package/gulp-stats
说明：显示gulp任务统计信息。

gulp-task-builder

网址：https://www.npmjs.com/package/gulp-task-builder
说明：JSON配置构建任务。

gulp-group

网址：https://www.npmjs.com/package/gulp-group
说明：任务分组。

gulp-list

网址：https://www.npmjs.com/package/gulp-list
说明：在控制台列出所有可用任务。

gulp-manifest

网址：https://www.npmjs.com/package/gulp-manifest
说明：生成 HTML5 缓存清单文件。