Front-End automation packaging release is a normal, especially in the mobile side, the testing process of static resources cache is a very headache, sometimes obviously deal with the bug test is still there, in fact, is the cache of evil, mobile phone than the PC browser, clean cache or a bit of trouble. Therefore, the automatic implementation of static resources version update is the right path.
In the actual development process, the features we commonly use include:
1, the elimination of the target path;
2, static resources copied to the target path;
3, CSS file merging and compression;
4, JS file merging and compression;
5, according to the changes in the file to add version number;
1th, 2, 3, 4 several functions is very good solution, today mainly said gulp implementation of static resources automatically add version number;
Search a lot of information, found are not want, I hope the effect is:
<script type= "Text/javascript" src= ". /.. /scripts/app_common.js?v=51921f3 "></script>
But most plug-ins achieve similar results, and look like a hassle.
<script type= "Text/javascript" src= ". /.. /scripts/app_common-51921f3.js "></script>
This causes a problem, each time a new file is generated, and the HTML reference must be modified at the same time.
Let's talk about my solution:
This is the directory structure, and the different structures may be somewhat different in processing.
The Gulp plugin used is: Gulp-asset-rev
Download the plugin first: npm install--save-dev Gulp-asset-rev
Example:
var gulp = require (' Gulp '); var assetrev = require (' Gulp-asset-rev '); Gulp.task (' rev ', [' revcss '],function() { gulp.src ("./test/test.html"). Pipe (Assetrev ()) . Pipe (Gulp.dest ('./dest '));}); Gulp.task (' revcss ',function () { return gulp.src ('./test/styles/ Test.css ') . Pipe (Assetrev ()) . Pipe (Gulp.dest ('./dest/styles/')}); Gulp.task (' Default ', [' rev ']);Before use:
<HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"/> <title></title> <link rel= "stylesheet" href= "/styles/test.css" type= "Text/css"/></Head><Body> <Div> <imgsrc= "./images/test.png" /> </Div> <script src= "./scripts/test.js" type= "Text/javascript" ></script> </Body></HTML>
After use:
<HTMLLang= "en"><Head> <MetaCharSet= "Utf-8"/> <title></title> <link rel= "stylesheet" href= "./styles/TEST_0EDE2CF . css " type=" text/css " /> </Head><Body> <Div> <imgsrc= "./images/test_25cf2b4.png" /> </Div> <script src= "./scripts/test_8ced4e6. js" type = "Text/javascript"></script> </Body></HTML>
It is obvious that it has changed the entire file name, and does not conform to the requirement that we have previously only added the version number parameter behind the file. We can do something in the source file.
Find Node_modules--gulp-assets-rev-->index.js modified to the following code:
var verstr = (Options.verconnecter | | "") + MD5; src=src+ "v=" +VERSTR;
Actually MD5 people are already counted, finally just pieced together the display way, so we can according to their own needs to combine on the line. So easy~
The complete configuration is as follows:
Package.json
{ "Name": "Stagingfinancial", "Version": "0.0.1", "description": "Pages for Staging financial App", "Devdependencies": { "Browser-sync": "*", "Del": "*", "Gulp": "*", "Gulp-asset-rev": "*", "Gulp-concat": "*", "Gulp-if": "*", "Gulp-jshint": "*", "Gulp-load-plugins": "*", "Gulp-minify-css": "^*", "Gulp-minify-html": "*", "Gulp-sass": "*", "Gulp-size": "*", "Gulp-sourcemaps": "*", "Gulp-uglify": "*", "Gulp-useref": "*", "Run-sequence": "*" }, "Engines": { "Node": ">=0.10.0" }, "Private":true}
are commonly used plug-ins, gulp a total of 5 API interface, but the plug-in is exceptionally powerful, can be configured on demand.
varGulp = require (' Gulp '));var$ = require (' Gulp-load-plugins ')();vardel = require (' del ');varRunsequence = require (' run-sequence '));varAssetrev = require (' Gulp-asset-rev '));functiongulpscripts (app_name) {returnGULP.SRC ([App_name + '/**/*.js ')]/// source file All JS. Pipe (Assetrev ())//configuration version number. pipe ($.uglify ())//compression, You can also add the merged code if you need to merge. Pipe (Gulp.dest (app_name+ "_dist") );//Copy to destination file path}functionGulpstyles (app_name) {returnGULP.SRC ([App_name + '/**/*.css ')]). Pipe (Assetrev ()). Pipe ( $.minifycss ()). Pipe (Gulp.dest (app_name+ "_dist"));}functiongulpimages (app_name) {returnGULP.SRC ([App_name + '/**/images/* ')]). Pipe (Gulp.dest (app_name+ "_dist")); Copy all pictures to destination folder}functiongulprevhtml (app_name) {gulp.src ([app_name+ '/*.html ', App_name + '/**/*.html ']//The source file below is all HTML. PIPE (Assetrev ())//config reference js and CSS files, if necessary, can also use minifyhtml pressure To shrink the HTML file. Pipe (Gulp.dest (app_name+ ' _dist ')); Package to the destination folder path under}gulp.task (' App_scripts ',function() {gulpscripts ("App");}); Gulp.task (' App_styles ',function() {Gulpstyles ("App");}); Gulp.task (' App_images ',function() {gulpimages ("App");}); Gulp.task (' App_rev ', [' app_styles ', ' app_scripts '],function() {gulprevhtml ("App");}); Gulp.task (' Clean ', del.bind (NULL, [' App_dist '], {force:true}); Gulp.task ("Beike",function() {runsequence (' Clean ', ["App_images", "App_rev"]);});
Because there are other items in the same directory, the functions are written here, and the different names are packaged into different target files.
The result is:
The static resource files referenced after packaging are as follows, and if a file is modified, the parameters change and, if not modified, do not change:
<link rel= "stylesheet" type= "Text/css" href= ". /.. /STYLES/COMMON.CSS?V=A8AACFB ">
<script type= "Text/javascript" src= ". /.. /scripts/app_common.js?v=51921f3 "></script>
Background:url (.. /IMAGES/NONE.PNG?V=8F204D4)
Gulp Automated packaging and static files automatically add version numbers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
