关于什么是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{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内容为
<!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 { width: 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-2fa5ef80a.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-2fa5ef80a.js
| +- index.html
| +- style-091d1f99f.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>
扫一扫
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
