Gulp:如何在HTML中自动替换压缩文件?

3
在开发过程中,通常我会单独将许多第三方库导入到我的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脚本来设置所有内容。

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

1个回答

5

我认为你有几个选项。

  • 从CDN获取常用库(如jQuery),这通常更快,用户可能已经在他们的浏览器中缓存了它们。它还可以使您的压缩JS文件大小减小,并为您的Web服务器提供更多连接,因为这些资源来自不同的域
  • 始终在html中保留all.min.js引用,并运行gulp-watch,以便每次保存时都会更新捆绑包。当您准备部署时,请运行不同的prod任务,其中包括缩小
  • 检查gulp-userefgulp-html-replace,以实际更新html并引用打包后的JS文件。您可能希望将这些更新后的html文件输出到不同的目录以进行部署

1
谢谢您提供的第三个选项 - 它让我的一天变得美好,正是我所需要的。 - WoJ

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接