gulp useref不能处理多个html文件

我的项目中有5个HTML文件，每个底部都有一个useref块，如下所示：

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

所有5个文件中的常见JS文件是plugins.js。 我需要在每个HTML文件中的JS文件，并在我的所有文件中重复。 我的第二个HTML文件有这个块（再次plugins.js在那里）：

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

而我的第五个HTML文件有这个块：

 <!-- 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 --> 

所以在每个使用plugins.js的文件中，在一些文件中我使用了一些其他的库。 但是，当我运行任务这三个文件不连接到main.js。 main.js中只有来自plugins.js的内容。 其他库不包括在main.js中。 为什么？ 我可以使用这个插件吗？

我的一口气任务：

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

Answer 1

所有的HTML文件都为连接文件（ static/js/main.js ）指定了相同的位置，但是它们都指定了应该连接的不同源文件。 根据你的HTML文件的处理顺序，你最终会得到一个不同的static/js/main.js 在你的情况下，从你的第一个例子。

你有两个select：

1. 对于每个HTML文件，为连接文件指定一个不同的位置：

   HTML文件1：

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

   HTML文件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文件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 --> 

   这将减less浏览器为每个页面所做的请求数量，但不会利用浏览器caching。

2. 请参阅每个HTML文件中的所有 JS文件，无论您是否需要特定页面的JS文件。 这意味着在所有的三个HTML文件中都有以下内容：

    <!-- 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 --> 

   由于浏览器将caching生成的main.js文件，只需要下载一次。