gulp-useref进行资源合并

深碍√TFBOYSˉ_ 2022-07-18 01:30 42阅读 0赞

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

## 配置 ##

通过插入特定的标签，用于标示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'));
    });

[https_www.npmjs.com_package_gulp-useref]: https://www.npmjs.com/package/gulp-useref