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 请求和时间负载，例如 blow:

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

所以我的困难是每次我必须手动用缩小的导入替换那些单独的导入时，只有 1 或 2 页这不是一个大问题，但是如果你有超过 10 页，它就变成了一场噩梦，我相信一定有一种 'right' 方法来处理这个问题，最可取的方法是仅通过运行和 Gulp 脚本来设置所有内容。

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

Answer 1

我想你有几个选择。

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

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

Gulp: How to auto replace minified files in html?

project-management

gulp