Useref插件的作用

Gulp的useref插件可以将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数。

构建项目

编写package.json文件

在dependencies加入gulp和gulp-server的依赖。

{
    "...": "...",
    "dependencies": {
        "gulp": "4.0.2",
        "gulp-useref": "3.1.6"
    }
}

编写index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- build:css css/combined.css -->
    <link rel="stylesheet" href="s1.css">
    <link rel="stylesheet" href="s2.css">
    <!-- endbuild -->
</head>
<body>
    
</body>
</html>

关键之处在于：

    <!-- build:css css/combined.css -->
    <link rel="stylesheet" href="s1.css">
    <link rel="stylesheet" href="s2.css">
    <!-- endbuild -->

userref插件通过这两个注释，可以知道需要合并哪些CSS文件。

该注释的编写规则如下：

<!-- build:<type>(alternate search path) <path> <parameters> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

再举个例子，如果我们要合并几个JS文件，并且把合并结果输出到项目输出目录中的scripts/combined.js，可以这么写：

<!-- build:js scripts/combined.js -->
<script type="text/javascript" src="scripts/one.js"></script>
<script type="text/javascript" src="scripts/two.js"></script>
<!-- endbuild -->

下面为了说明useref插件的效果，编写s1.css和s2.css两个示例CSS文件:

s1.css

.c1 {
    color: black;
}

s2.css

.c2 {
    color: white;
}

最后我们编写gulpfile.js文件：

var gulp = require('gulp');
var useref = require("gulp-useref")

gulp.task("build", function() {
    return gulp.src("index.html")
    .pipe(useref())
    .pipe(gulp.dest("dest"))
});

执行npm install然后运行gulp build。会在项目的dest目录得到如下文件：

输出目录结构

其中index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 注意，此处两个CSS的引用已被替换为合并后的输出文件 -->
    <link rel="stylesheet" href="css/combined.css">
</head>
<body>
    
</body>
</html>

dest/css/combined.css文件：

.c1 {
    color: black;
}
.c2 {
    color: white;
}

显然，两个CSS文件已被合并到了一起。

注意事项

Useref插件仅仅将多个文件连接到一起，不会做任何额外处理（例如minify）。如果需要做其他操作，可以配合gulp-if插件使用：

gulp.task('html', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});

此例子中，不仅合并了JS和CSS文件，还同时对他们分别做了uglify和minify操作。