时间戳

首页 > 解决方案 > 关于具有多个 html 文件的重复内容的 gulp-useref 问题

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

问题描述

当我使用许多 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.html combine.min.js 文件大小，它的内容是两倍。

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

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

标签： gulpduplicatesgulp-useref

解决方案

如果您将gulp-changedset 添加到目标目录，那应该会阻止文件被覆盖或添加到其中。

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'));
});

推荐阅读