Gulp：如何自动替换HTML中的缩小文件？ [英] Gulp: How to auto replace minified files in html?

问题描述

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

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

要创建一个发布分支，我将使用Gulp将所有这些分离的文件缩小并连接成一个'min.js'文件来保存http请求和时间加载，就像打击一样：

 < script src =/ resource / all.min.jstype =text / javascript>< / script> 
  

所以我的困难在于，每次我必须手动替换这些被缩小的单独导入时，这不是一个大问题，只有1或2页，但是如果你有超过10页的话，这将成为一场噩梦，我相信必须有一个正确的方式来解决这个问题，最好的方法是把所有东西只运行Gulp脚本。

有什么更好的解决方案或建议？或者我管理我的发行版分支的方式是完全错误的？

解决方案

我想你有几个选择。 b
$ b

• 从通常更快的CDN获取公共库（如jQuery），并且用户可能已经将它们缓存在浏览器中。它还保持缩小的JS文件大小，并为您的Web服务器提供更多连接，因为这些资源来自不同的域


• 只需将 all.min .js 在您的html中始终提供并运行 gulp-watch < a>，因此每次保存时都会更新包。当您准备部署时，运行包含缩小的其他 prod 任务
  
• 签出 gulp-useref 或 gulp-html-replace 来实际更新html引用你的捆绑JS文件。您可能希望将这些更新后的html文件输出到另一个目录进行部署

During development, normally I'll import lot of third party libs to my html separately, like below:

<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>

To create a release branch, I'll use Gulp to minify and concat all those separated files into one 'min.js' file to save http requests and time load, like blow:

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

So my difficulty is that each time I have to manually replace those separate imports by the minified one, it's not a big issue for only 1 or 2 pages, however if you have more than 10 pages, it becomes a nightmare, I believe there must be a 'right' way to handle this problem, the most desirable way is to set up everything by running the Gulp script only.

Any better solutions or suggestions? or the way I manage my release branch is totally wrong?

解决方案

I think you have a few options.

• Get the common libraries (like jQuery) from a CDN which is often faster and users might already have them cached in their browser. It also keeps your minified JS file size down and gives you more connections to your web server because those resources are coming from a different domain
• Just leave the all.min.js ref in your html all the time and run gulp-watch so the bundle will update each time you save. When you're ready to deploy run a different prod task that includes minification
• Checkout gulp-useref or gulp-html-replace to actually update the html with references to your bundled JS file. You might want to output these updated html files to a different directory for deployment

这篇关于Gulp：如何自动替换HTML中的缩小文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！