Problem about gulp-useref on duplicate content with multiple html files

Question

When I configure useref ( gulp v3) with many html files, for example :

I first create a html page and then a second and run gulp task

Page html01.html

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

Page html02.html

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

Here we have the same script on many html pages

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

If we run the task with only html01.html and then with html02.html combine.min.js file size, and its contents are twice.

if I add a html03.html with the same reference, size and triple content

How can I avoid duplicating content because the goal is to optimize this file : combine.min.js? Is there a special setting?

Answer 1

If you add in gulp-changed set to the destination directory, that should stop the file getting overwritten or added to.

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