关于什么是gulp，它和grunt有什么区别等问题，这里不做任何介绍。本文主要介绍如何使用gulp-usemin这款插件，同时也会简单介绍本文中用到的一些插件。
什么是gulp-usemin
用来将HTML 文件中（或者templates/views）中没有优化的script 和stylesheets 替换为优化过的版本
gulp-usemin根据预先在html文件（或者其它模板/视图中的文件）中声明好的blocks来执行一系列任务（例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中）来处理未优化的样式和脚本。然后我们可以通过gulp.dest()方法将处理的结果输出到其它目录。
如何使用
首先需要了解在html中如何声明一个blocks，一个blocks定义如下：
... HTML Markup, list of script / link tags. ```
- pipelineId：在配置文件中需要使用的 pipeline id 或者 指定 remove 声明用于移除整块blocks
- alternate search path：（可选项）默认情况下任务读取的输入文件相对于blocks块中引入的路径，使用这一可选配置项可以修改文件引入的路径
- path：最终合并和处理后输出的文件名及路径
这里使用gulp-usemin文档中给出的示例目录结构作为演示，目录结构如下：
|+- app| +- index.html| +- assets| +- js| +- foo.js| +- bar.js| +- baz.js| +- css| +- clear.css| +- main.css+- dist+- node_modules+- gulpfile.js
这里我们用到了下面列举的一些gulp插件：
- gulp-load-plugins：省去手动引用插件的麻烦
- gulp-usemin：本文主要讲解的插件
- gulp-uglify：压缩js
- gulp-minify-css：压缩css
- gulp-clean：清空目录
- gulp-rev：添加md5戳
任务一：文件合并到指定的目录文件名下
这是一个很常规的任务，把需要合并的文件放置在对就的blocks里面，然后指出合并后的文件对应文件名即可。下面是合并前的app/index.html中未优化前的内容
gulp-usemin示例
然后，在app/gulpfile.js中给出对就的task，这里我们对合并后的css和javaScript进行了压缩，并最终输出到dist/目录下
'use strict';var gulp = require('gulp'), $ = require("gulp-load-plugins")(); gulp.task('usemin', function() { return gulp.src('./app/index.html') .pipe($.usemin({ js: [$.uglify()], css: [$.minifyCss()] })) .pipe(gulp.dest('dist/')); }); 生成后的dist/目录如下
|+- dist| +- js| +- optimized.js| +- index.html| +- style.css
最终在dist/index.html只有合并过后的文件引用，同时在app/index.html文件中的添加的blocks声明注释也自动去掉了。
当然这里也可以保留注释，只需要在配置中将enableHtmlComment设置为true`就可以了。
gulp-usemin示例
`dist/style.css为压缩后的样式
.clear{ clear:both}.main{ width:1200px;margin:0 auto}.btn{ display:inline-block;text-align:center;border:none;background:#136fd2;color:#fff;border-radius:4px;box-shadow:0 -2px 0 #1360ba inset;padding:9px 10px;font-size:12px;font-weight:700;margin-bottom:4px} dist/js/optimized.js如下：
console.log("foo"),console.log("bar"); 任务二：将样式和脚本直接嵌入到页面中
使用gulp-usemin不光可以合并文件，可以将指定的文件嵌入到html文件中，这功能很强大。
在开始这个任务前先把上一个任务生成的文件使用gulp-clean全部清除掉
gulp.task('clean', function() { gulp.src('./dist/*') .pipe($.clean()); }); 接下来更改app/index.html内容为
gulp-usemin示例
这里任务不变，最终在dist/index.html的内容如下：
gulp-usemin示例
虽然我们在配置中添加了压缩样式和脚本的功能，但观察生成后的文件，其实并没有被压缩。
任务三： 移除部分文件
这是是指最终生成的文件中不包含某些文件，比较常见的是在开发过种中手动使用 mockAjax 和 mockJSON 模拟ajax数据和请求，但在发布的时候这些文件引用需要手动删除掉。
同样先清空dist/目录，然后更改app/index.html如下
gulp-usemin示例
这里的assets/js/baz.js是不会被输出到dist/js文件中，结果如下
gulp-usemin示例
任务四：为文件添加md5戳
接下来在任务一的基础上对文件添加一个md5戳，这里使用gulp-rev插件
gulp.task('usemin', function() { return gulp.src('./app/index.html') .pipe($.usemin({ js: [$.uglify(), $.rev()], css: [$.minifyCss(), $.rev()] })) .pipe(gulp.dest('dist/')) }); 执行后dist/index.html如下：
gulp-usemin示例
生成后的dist/目录
|+- dist| +- js| +- optimized-2fa5ef80a.js| +- index.html| +- style-a28260ea41.css
是不是很爽，这样就ok了？
但还不够完美，如果再去改一下css或者js文件，再次执行任务，会发现又生成了一个style-d4bd3b66b7.css（名字可能不同）样式，而且html对应的资源引用也是指向这个新生成的，同时原来的style-a28260ea41.css文件也还一直存在，很明显浪费了磁盘空间。那好手动删除了吧╯﹏╰，算了，直接使用gulp-clean把整个清空，重新生成一遍，但认真一想，如果项目要生成的文件成百上千，我再生成一次太耗费时间了，其实我只想更新一部分文件。
关于这个问题在网上找了好久的解决方案，这里找到了一个插件，使用它可以自定义保存多少个旧版本的文件，每次更新就会删除掉老的一个版本。其它的方案还在尝试中。
插件中有一个cleaner()方法，涉及到三个依赖文件gulp-util, rimraf和thought2，请自行下载。
'use strict'; var gulp = require('gulp'), path = require('path'), through = require('through2'), del = require('del'), $ = require("gulp-load-plugins")(); function cleaner() { return through.obj(function(file, enc, cb){ del(path.resolve( (file.cwd || process.cwd()), file.path)).then(function() { this.push(file); cb(); }, function(err) { this.emit('error', new $.util.PluginError('Cleanup old files', err)); }); }); } gulp.task('usemin', ['clean:rev'], function() { return gulp.src('./app/index.html') .pipe($.usemin({ js: [$.uglify(), $.rev()], css: [$.minifyCss(), $.rev()] })) .pipe(gulp.dest('dist/')) }); gulp.task('clean:rev', function() { gulp.src(['dist/**/*.*'], { read: false}) .pipe( $.revOutdated(1)) // 只保存一个旧版本的rev .pipe(cleaner()) return; }) // 清空dist目录下的所有文件 gulp.task('clean', function() { gulp.src('./dist/*') .pipe($.clean()) }); 注意：由于文档中使用的rimraf插件gulp官方不建议使用了，所以改成了更为常用的del插件。
运行后的dist/目录如下：
|+- dist| +- js| +- optimized-2fa5ef80a.js| +- index.html| +- style-091d1f99f.css| +- style-fffb5ca589.css
其中`dist/index.html内容如下：
gulp-usemin示例