Gulp：如何自动替换 html 中的缩小文件？

Question

在开发过程中，通常我会分别将很多第三方库导入到我的html中，如下所示：

<script src="/resource/jquery-validation-1.15.0/jquery.validate.js" type="text/javascript"></script>
<script src="/resource/jquery-validation-1.15.0/localization/messages_en.min.js" type="text/javascript"></script>
<script src="/resource/assets/js/publish.js" type="text/javascript"></script>

为了创建一个发布分支，我将使用 Gulp 将所有这些分离的文件缩小并连接到一个“min.js”文件中，以保存 http 请求和时间加载，如下所示：

<script src="/resource/all.min.js" type="text/javascript"></script>

所以我的困难是，每次我必须手动将这些单独的导入替换为缩小的导入，对于只有 1 或 2 页的情况来说这不是一个大问题，但是如果你有超过 10 页，它就会变成一场噩梦，我相信一定有是处理此问题的“正确”方法，最理想的方法是仅通过运行 Gulp 脚本来设置所有内容。

有更好的解决方案或建议吗？或者我管理发布分支的方式完全错误？

Answer 1

我认为你有几个选择。

• 从 CDN 获取公共库（如 jQuery）通常速度更快，并且用户可能已经将它们缓存在浏览器中。它还可以缩小缩小的 JS 文件大小，并为您提供更多与 Web 服务器的连接，因为这些资源来自不同的域
• 只需将all.min.js引用始终保留在 html 中并运行gulp-watch即可，这样每次保存时捆绑包都会更新。当您准备好部署时，运行prod包含缩小在内的不同任务
• 检查gulp-useref或gulp-html-replace以使用对捆绑的 JS 文件的引用来实际更新 html。您可能希望将这些更新的 html 文件输出到不同的目录以进行部署