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操作。
网友评论