gulp插件gulp-usemin简单使用

关于什么是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-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