关于什么是gulp，它和grunt有什么区别等问题，这里不做任何介绍。本文主要介绍如何使用gulp-usemin这款插件，同时也会简单介绍本文中用到的一些插件。
什么是gulp-usemin
用来将HTML 文件中（或者templates/views）中没有优化的script 和stylesheets 替换为优化过的版本
gulp-usemin根据预先在html文件（或者其它模板/视图中的文件）中声明好的blocks来执行一系列任务（例如合并文件并重全名、排除一些只在开发过程中引入的脚本以及将css和js中的代码提取出来内嵌在html文件中）来处理未优化的样式和脚本。然后我们可以通过gulp.dest()方法将处理的结果输出到其它目录。
如何使用
首先需要了解在html中如何声明一个blocks，一个blocks定义如下：
<!-- build:<pipelineId>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
```
- 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中未优化前的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->
</head>
<body>
<!-- build:js js/optimized.js -->
<script src="assets/js/foo.js"></script>
<script src="assets/js/bar.js"></script>
<!-- endbuild -->
</body>
</html>
然后，在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`就可以了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<script src="js/optimized.js"></script>
</body>
</html>
`dist/style.css为压缩后的样式
.clear{clear:both}.main{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内容为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<!-- build:inlinecss -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->
</head>
<body>
<!-- build:inlinejs -->
<script src="assets/js/foo.js"></script>
<script src="assets/js/bar.js"></script>
<!-- endbuild -->
</body>
</html>
这里任务不变，最终在dist/index.html的内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<style>.clear {
clear: both;
}
.main {
1200px;
margin: 0 auto;
}
.btn {
display: inline-block;
text-align: center;
border: none;
background: #136fd2;
color: white;
border-radius: 4px;
box-shadow: 0 -2px 0 #1360ba inset;
padding: 9px 10px;
font-size: 12px;
font-weight: bold;
margin-bottom: 4px;
}</style>
</head>
<body>
<script>console.log('foo');
console.log('bar');</script>
</body>
</html>
虽然我们在配置中添加了压缩样式和脚本的功能，但观察生成后的文件，其实并没有被压缩。
任务三： 移除部分文件
这是是指最终生成的文件中不包含某些文件，比较常见的是在开发过种中手动使用 mockAjax 和 mockJSON 模拟ajax数据和请求，但在发布的时候这些文件引用需要手动删除掉。
同样先清空dist/目录，然后更改app/index.html如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<!-- build:css style.css -->
<link rel="stylesheet" href="css/clear.css"/>
<link rel="stylesheet" href="css/main.css"/>
<!-- endbuild -->
</head>
<body>
<!-- build:js js/optimized.js -->
<script src="assets/js/foo.js"></script>
<script src="assets/js/bar.js"></script>
<!-- endbuild -->
<!-- build:remove -->
<script src="assets/js/baz.js"></script>
<!-- endbuild -->
</body>
</html>
这里的assets/js/baz.js是不会被输出到dist/js文件中，结果如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<script src="js/optimized.js"></script>
</body>
</html>
任务四：为文件添加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如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<link rel="stylesheet" href="style-a28260ea41.css"/>
</head>
<body>
<script src="js/optimized-62fa5ef80a.js"></script>
</body>
</html>
生成后的dist/目录
|
+- dist
| +- js
| +- optimized-62fa5ef80a.js
| +- index.html
| +- style-a28260ea41.css
是不是很爽，这样就ok了？
但还不够完美，如果再去改一下css或者js文件，再次执行任务，会发现又生成了一个style-d4bd3b66b7.css（名字可能不同）样式，而且html对应的资源引用也是指向这个新生成的，同时原来的style-a28260ea41.css文件也还一直存在，很明显浪费了磁盘空间。那好手动删除了吧╯﹏╰，算了，直接使用gulp-clean把整个清空，重新生成一遍，但认真一想，如果项目要生成的文件成百上千，我再生成一次太耗费时间了，其实我只想更新一部分文件。
关于这个问题在网上找了好久的解决方案，这里找到了一个gulp-rev-outdated插件，使用它可以自定义保存多少个旧版本的文件，每次更新就会删除掉老的一个版本。其它的方案还在尝试中。
插件中有一个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-62fa5ef80a.js
| +- index.html
| +- style-2091d1f99f.css
| +- style-fffb5ca589.css
其中`dist/index.html内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>gulp-usemin示例</title>
<link rel="stylesheet" href="style-fffb5ca589.css"/>
</head>
<body>
<script src="js/optimized-62fa5ef80a.js"></script>
</body>
</html>
结语
注意，虽然本文介绍了gulp-usemin的使用方法，但这个插件现在已不推荐使用了，详情可以查看gulp黑名单，官方推荐使用 gulp-useref 来达到同样的目的。
本文示例代码地址：https://github.com/wujie520303/blogCode/tree/master/gulp/gulp-usemin-demo