关于具有多个 html 文件的重复内容的 gulp-useref 问题

Question

当我使用许多html文件配置useref(gulp v3(时，例如：

我首先创建一个 html 页面，然后创建第二个并运行 gulp 任务

页面 html01.html

 <!-- build:js js/combined.min.js -->
    <script src="../../assets/script01.js"></script>
    <script src="../../assets/script02.js"></script>
 <!-- endbuild -->

页面 html02.html

 <!-- build:js js/combined.min.js -->
    <script src="../../assets/script01.js"></script>
    <script src="../../assets/script02.js"></script>
 <!-- endbuild -->

在这里，我们在许多html页面上都有相同的脚本

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

如果我们只使用 html01 运行任务.html然后使用 html02.htmlcombine.min.js文件大小，其内容是两倍。

如果我添加一个具有相同引用、大小和三重内容的 html03.html

我怎样才能避免重复的内容，因为目标是优化这个文件：combine.min.js？有特殊设置吗？

Answer 1

如果将gulp-changed集添加到目标目录，则应阻止文件被覆盖或添加到。

const changed = require('gulp-changed');
gulp.task('UpdateCombineCssJs', function() {
    return gulp.src('html/*.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', cssnano()))
        .pipe(changed('dist'))
        .pipe(gulp.dest('dist'));
});