gulp-useref无法处理多个html文件

Question

我的项目中有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，在一些文件中我使用一些其他库。但当我运行task时，这三个文件并没有连接到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。在你的例子中，是你第一个例子中的那个。

你有两个选择：

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

   这将减少浏览器对每个页面的请求数量，但它没有利用浏览器缓存。

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

   由于浏览器会缓存生成的main.js文件，因此只需下载一次。