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，在某些文件中我使用其他一些库。但是当我运行任务时，这三个文件没有连接到 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 文件，因此只需下载一次。