常用的gulp插件
gulp API：http://www.gulpjs.com.cn/docs/api/
gulp中文API：http://www.ydcss.com/archives/424
插件搜索：
https://www.npmjs.com/confirm-email/IVEnvYi-ejc6vmEynQRIK4TwV9L0Nz7ZN2Rcz31x（全）
http://gulpjs.com/plugins/（介绍具体）
目录：
- gulp-load-plugins：省去手动引用插件的麻烦
- gulp-usemin：本文主要讲解的插件
- gulp-rev：添加md5戳
- 编译Sass (gulp-ruby-sass)
- 补全浏览器兼容的css(gulp-autoprefixer)
- 压缩html(gulp-htmlmin) https://github.com/muzhen/gulp/tree/master/gulp-htmlmin
- 压缩CSS (gulp-minify-css) https://github.com/scniro/gulp-clean-css/edit/master/test/fixtures/test.css
- 压缩js（gulp-uglify）
- 检查js(gulp-jshint)
- 合并文件,拼接 (gulp-concat) https://github.com/muzhen/gulp/tree/master/gulp-concat
- 图片压缩 (gulp-imagemin)
- 即时重整 ，服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）(gulp-livereload)----
- BrowserSync （livereload的升级版）
- 清空文件夹，清理档案，清空目录 (gulp-clean)
- 图片快取，只有更改过得图片会进行压缩 (gulp-cache)
- 更动通知 (gulp-notify)
- 重命名文件(gulp-rename)
- 模板(gulp-template)
-
markdown 编辑工具(gulp-markdown)
1、自动加载插件 gulp-load-plugins
安装：
npm install --save-dev gulp-load-plugins
1.1、在package.json里如下把要安装的插件名称 版本写清楚，
{ "devDependencies": { "gulp": "~3.6.0", "gulp-rename": "~1.2.0", "gulp-ruby-sass": "~0.4.3", "gulp-load-plugins": "~0.5.1" } }
1.2、在 gulpfile.js里，运用gulp-load-plugins加载插件
var gulp = require('gulp'); //加载gulp-load-plugins插件，并马上运行它 var plugins = require('gulp-load-plugins')();
1.3、运用，当我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候，就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀，之后再转换为驼峰命名。
19、gulp-file-include
gulp-file-include提供了一个include的方法让我们可以想后端模版一样把公共的部分分离出去。而且提供的include方法有许多配置项，详细可以去看看 gulp-file-include。
参考文档：
https://github.com/muzhen/gulp/tree/master/gulp-file-include【by muzhen】
https://www.npmjs.com/package/gulp-file-include
http://blog.csdn.net/leo8729/article/details/50358581
新建：
package.json文件
安装
npm install gulp
npm install gulp --save-dev
npm install gulp-file-include –save-dev
文件目录
|-node_modules |-src // 生产环境的 html 存放文件夹 |-include // 公共部分的 html 存放文件夹 |-*.html |-dist // 编辑后的 html 文件
新建gulpfile.js
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
gulp.task('fileinclude', function() {
gulp.src('src/**.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('dist'));
});
接着新建两个html文件，分别是头部和底部：
header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>这是 header 的内容</h1>
footer.html
<h1>这是 footer 的内容</h1>
</body> </html>
最后在新建一个html，把要用到的header和footer给include进来。
layout.html
@@include('include/header.html')
<p> 这是 layout 的内容 </p>
@@include('include/footer.html')
在命令行中输入 gulp fileinclude
编译完成之后，到dist目录一下有一个layout.html的文件，这就是最后编译出来的。
19.2、gulp-ejs
功能和上面的差不多，分离那些公共部分的html文件
参考文档：
http://blog.csdn.net/leo8729/article/details/50358581
http://www.ydcss.com/archives/34
新建：
package.json文件
安装：
npm install gulp --save-dev
npm install gulp-ejs --save-dev
新建gulpfile.js
var gulp = require('gulp');
var ejs = require('gulp-ejs');
gulp.task('ejs', function() {
gulp.src('src/**.ejs')
.pipe(ejs())
.pipe(gulp.dest('dist'));
});
接着和上面的一样，新建两个html文件，分别是头部和底部
新建layout.ejs文件
<%-include include/header %>
<p> 这是 layout 的内容 </p>
<%-include include/footer %>
1.3、gulp-content-includer-合并按模块引出的html文件
参考：http://www.myexception.cn/HTML-CSS/2011495.html
2、gulp-less
参考文档：
http://www.ydcss.com/archives/34
https://github.com/muzhen/gulp/tree/master/gulp-less【by muzhen】
介绍：
使用gulp-less插件将less文件编译成css，当有less文件发生改变自动编译less，并保证less语法错误或出现异常时能正常工作并提示错误信息
具体使用：
http://www.ydcss.com/archives/34
安装：
cnpm install gulp-less --save-dev
新建gulpfile.js
var gulp = require('gulp'),
less = require('gulp-less'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber');
gulp.task('testLess', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(gulp.dest('src/css')); //将会在src/css下生成index.css以及detail.css
});
gulp.task('testWatch', function () {
//编译单个less文件
gulp.src('src/less/index.less')
//多个文件以数组形式传入
gulp.src(['src/less/index.less','src/less/detail.less'])
//编译src目录下的所有less文件 //除了reset.less和test.less（**匹配src/less的0个或多个子文件夹） gulp.src(['src/less/*.less', '!src/less/**/{reset,test}.less'])
//编译less后压缩css
var gulp = require('gulp'),
less = require('gulp-less'),
cssmin = require('gulp-minify-css');
gulp.task('testLess', function () {
gulp.src('src/less/index.less')
.pipe(less())
.pipe(cssmin()) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: 'ie7'}))
.pipe(gulp.dest('src/css'));
});
3、Gulp-ruby-sass
gulp-ruby-sass基于ruby和sass，编译Sass文件为 CSS文件。
特点：比gulp-sass，但是更稳定，功能更丰富。
安装：
$ npm install --save-dev gulp-ruby-sass
需要先安装Ruby和Sass,如果你是OSX和Linux系统可能已经有Ruby，你可以在终端使用ruby -v测试。当你确定Ruby已安装，运行gem install sass 安装Sass。
使用：
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('default', function () {
return gulp.src('src/scss/app.scss') //增加你需要编译的文件
.pipe(sass({sourcemap: true, sourcemapPath: '../scss'}))
.pipe(gulp.dest('dist/css'));
});
使用gulp-watch自动重编译你的文件，当你编辑文件的时候。
5、 补全浏览器兼容的css(gulp-autoprefixer)
http://www.ydcss.com/archives/94
8、压缩js（gulp-uglify）
http://www.ydcss.com/archives/54
12、gulp-livereload（实时刷新）
介绍：
gulp-livereload拯救F5！当监听文件发生变化时，浏览器自动刷新页面。【事实上也不全是完全刷新，例如修改css的时候，不是整个页面刷新，而是将修改的样式植入浏览器，非常方便。】特别是引用外部资源时，刷新整个页面真是费时费力
具体使用介绍：
http://www.ydcss.com/archives/702
http://ofcss.com/2014/05/03/gulp-as-a-development-web-server-zh_cn.html
12.1、谷歌浏览器或火狐安装livereload插件（谷歌为.crx文件，火狐为.xpi文件）
12.2、通过npm安装http-server ，快速建立http服务
npm install http-server -g
通过cd找到发布环境目录dist
运行http-server，默认端口是8080
访问路径localhost:8080
12.3、打开页面并启动livereload浏览器插件，点击chrome上的LiveReload插件，空心变成实心即关联上，
其他：
- requireDir
var requireDir = require('require-dir'); // Require all tasks in gulp/tasks, including subfolders requireDir('./gulp/tasks', { recurse: true });
任务：
default.js
var gulp = require('gulp'); gulp.task('default', ['watch']);
deploy.js
var gulp = require('gulp'); /** * Start rsync task */ gulp.task('deploy', ['rsync']);
publish.js
var gulp = require('gulp'); /** * Run task browsersync:production */ gulp.task('publish', ['browsersync:production']);
browser-sync.js
var gulp = require('gulp'); var browsersync = require('browser-sync'); var config = require('../../config').browsersync.production; /** * Start a server and watch changes with BrowserSync */ gulp.task('browsersync:production', ['build:production'], function() { browsersync(config); });