gulp-useref进行资源合并

最新推荐文章于 2021-06-30 13:24:17 发布

xinluke

最新推荐文章于 2021-06-30 13:24:17 发布

阅读量5.2k

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/xinluke/article/details/52433317

版权

Javascript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

使用gulp-useref来对html页面中的js，css引用进行合并，压缩等操作很简单。
具体案例请参考官方
https://www.npmjs.com/package/gulp-useref

配置

<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>

通过插入特定的标签，用于标示gulp-useref要处理的资源。

gulp脚本

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

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulp.dest('dist'));
});

tip

通常，我们希望资源进行合并输出后，删除掉合并前的js和css，避免接下来进行其他处理时，要手动再写脚本排除掉它们。
所以，需求是使用gulp-useref合并资源输出并删除合并前的文件。
查看源码和参照官方配置，惊喜发现，改下gulp脚本就可以达到目的：

var gulp = require('gulp'),
    useref = require('gulp-useref');
var del = require('del');
var vinylPaths = require('vinyl-paths');

gulp.task('default', function () {
    return gulp.src('app/*.html')
        .pipe(useref(),function (){
            return vinylPaths(del)
            })
        .pipe(gulp.dest('dist'));
});