如何在 Gulp 中使用串联的缩小文件

Question

我是 Gulp 的新手，我能够创建一个 site.min.js 文件，据我所知，这是我的 JavaScript 文件的缩小版本。

我该如何利用它？

我不确定我的方向是否正确，但我的 index.html 是否也应该修改为仅加载新的 min.js 文件？

Answer 1

当您缩小文件时，结果是一个完全不同的文件。您需要在您的页面中 link 才能使用它。

<script src="site.min.js"></script>

您的 index.html 文件的生产版本应仅 link 缩小版本，应删除任何非缩小版本。

有 gulp 个插件可以帮助解决这个问题。

• gulp-useref 受欢迎
• gulp-html-replace相当灵活
• gulp-usemin
• gulp-htmlbuild

它们都提供了类似的功能，您可以在 HTML 注释中指定将被缩小版本替换的块。

<!-- build:js -->
<script src="website-module.js"></script>
<script src="core.js"></script>
<!-- endbuild --> 

如果您的 gulp 任务中有正确的选项，它将变成：

<script src="site.min.js"></script>