问题
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?
回答1:
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.jsref 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 differentprodtask 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
来源：https://stackoverflow.com/questions/38236996/gulp-how-to-auto-replace-minified-files-in-html