在我们构建一个大型的web应用，在我们发布之前，我们需要对html中引入的js，css，文件进行相应的压缩，编译工作。但如果把文件一个一个的添加到gulpfile，这工作显得太low了，于是我们可以利用gulp-useref插件进行自动化的工作。

使用

<!-- build:<type>(alternate search path) <path> <parameters> -->
    html的标记，
    一段js的列表，
    一段css的link的列表
<!-- endbuild -->

上述是通过一个build标记<!-- build -->，<!-- endbuild -->，让gulp找到需要编译的文件。

  • type 编译的类型，可选js，css or remove，remove 会移除标记中所有的文件，其余的则会生成一个合并文件
  • alternate search path表示编译时找寻的文件所在位置，
  • path生成的目标文件，
  • parameters需要添加到这个标签里的额外的一些参数

示例

源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
    <!-- build:js scripts/combined.js -->
    <script type="text/javascript" src="scripts/one.js"></script> 
    <script type="text/javascript" src="scripts/two.js"></script> 
    <!-- endbuild -->
</body>
</html>

生成代码：

1
2
3
4
5
6
7
8
<html>
<head>
    <link rel="stylesheet" href="css/combined.css"/>
</head>
<body>
    <script src="scripts/combined.js"></script> 
</body>
</html>

gulpfile中：

在v3版本之前，可以使用useref.assets()获取资源文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var gulp = require('gulp'),
    useref = require('gulp-useref'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-minify-css'),
    filter = require('gulp-filter');

var jsFilter = filter('**/*.js', { restore: true });
var cssFilter = filter('**/*.css', { restore: true });
 
gulp.task('default', function () {
    var assets = useref.assets();
 
    return gulp.src('app/*.html')
        .pipe(assets)

        /* 挑选出其中的js文件 */
        .pipe(jsFilter)
        .pipe(uglify())
        .pipe(jsFilter.restore)

        /* 挑选出其中的css文件 */
        .pipe(cssFilter)
        .pipe(minifyCss())
        .pipe(cssFilter.restore)

        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

如果你直接升级gulp-useref版本到v3，但是没有改gulpfile中的配置，你运行gulp时会报下面的错，
TypeError: $.useref.assets is not a function
或是
TypeError: useref.assets is not a function

所以在v3版本，你需要使用gulp-if挑选出相应的js，css文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var gulp = require('gulp'),
    useref = require('gulp-useref'),
    uglify = require('gulp-uglify'),
    minifyCss = require('gulp-minify-css'),
    gulpIf = require('gulp-if');

gulp.task('default', function () {
    var assets = useref.assets();
 
    return gulp.src('app/*.html')
        .pipe(useref())

        /* 挑选出其中的js文件 */
        .pipe(gulpIf('*.js',uglify()))

        /* 挑选出其中的css文件 */
        .pipe(gulpIf('*.css',minifyCss()))

        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

通过上述插件的使用，我们可以更加快速高效的完成我们的前端构建工作。