gulp useref not working with multiple html files

Question

I have 5 HTML files in my project and every has a useref block in the bottom like this:

<!-- build:js static/js/main.js -->
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

Common JS file in all 5 files are plugins.js . I need that JS file in every HTML file and its repeating in all my files. My second HTML file has this block (again plugins.js is there) :

<!-- build:js static/js/main.js -->
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

And my fifth HTML file has this block:

<!-- build:js static/js/main.js -->
<script src="static/js/jquery.matchHeight-min.js"></script>
<script src="static/js/jquery.barrating.min.js"></script>
<script src="static/js/plugins.js"></script>
<!-- endbuild -->

So in every file im using plugins.js and in some files i use some other libraries. But when i run task this three files are not concatenated into main.js. Only thing in main.js is content from plugins.js . Other libraries are not included into main.js. Why is that so? Can i even use this plugin like that?

My gulp task:

gulp.task('compress:js:html', ['clear:dist'], function () {
    return gulp.src('./*.html')
        .pipe(useref())
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(gulp.dest('./dist/'))
});

Answer 1

All your HTML files specify the same location for the concatenated file ( static/js/main.js ), but they all specify different source files that should be concatenated. Depending on the order in which your HTML files are processed you end up with a different static/js/main.js . In your case the one from your first example.

You have two options:

1. For each HTML file specify a different location for the concatenated file:

   HTML File 1:

    <!-- build:js static/js/main1.js --> <script src="static/js/plugins.js"></script> <!-- endbuild --> 

   HTML File 2:

    <!-- build:js static/js/main2.js --> <script src="static/js/jquery.barrating.min.js"></script> <script src="static/js/plugins.js"></script> <!-- endbuild --> 

   HTML File 3:

    <!-- build:js static/js/main3.js --> <script src="static/js/jquery.matchHeight-min.js"></script> <script src="static/js/jquery.barrating.min.js"></script> <script src="static/js/plugins.js"></script> <!-- endbuild --> 

   This will reduce the number of requests a browser has to make for each page, but it doesn't leverage browser caching.

2. Refer to all JS files in each HTML file, whether you need the JS file for that specific page or not. That means you have the following in all three of your HTML files:

    <!-- build:js static/js/main.js --> <script src="static/js/jquery.matchHeight-min.js"></script> <script src="static/js/jquery.barrating.min.js"></script> <script src="static/js/plugins.js"></script> <!-- endbuild --> 

   Since browsers will cache the resulting main.js file it will only have to be downloaded once.