Gulp Add a hash (MD5) suffix to a static resource file to prevent caching

The first step is to install the required packages, installed with NPM, as follows:

NPM Install gulp Gulp-rev run-sequence gulp-rev-collector--save-dev

The second step is to write the configuration in the Gulpfile.js file:

Introduce Gulp and gulp plug-ins var gulp = require (' Gulp '), runsequence = require (' Run-sequence '), rev = require (' Gulp-rev '),

Revcollector = require (' Gulp-rev-collector ');


Define CSS, JS source file path var csssrc = './app/static/css/*.css ', jssrc = './app/static/js/admin/*.js '; The CSS generates the file hash code and generates Rev-manifest.json file names against the mapping Gulp.task (' Revcss ', function () {return gulp.src (CSSSRC). Pipe (Rev (
). Pipe (Gulp.dest ('./rev/css ')). Pipe (Rev.manifest ()). Pipe (Gulp.dest ('./rev/css '));


});                                JS generates a file hash code and generates Rev-manifest.json file names against the mapping Gulp.task (' Revjs ', function () {return gulp.src (JSSRC). Pipe (rev ())                       Adds a hash code to the file. Pipe (Gulp.dest ('./rev/js/admin ')). Pipe (Rev.manifest ())
Generates Rev-mainfest.json files as records. PIPE (Gulp.dest ('./rev/js '));


});
        HTML replacement CSS, JS file version gulp.task (' Revhtmlcss ', function () {return gulp.src (['./rev/css/*.json ', './app/index.html '])            . Pipe (Revcollector ())             Replaces the corresponding record in HTML. PIPE (Gulp.dest ('./view '));
Output to the folder}); Gulp.task (' Revhtmljs ', function () {return gulp.src (['./rev/js/*.json ', './view/index.html ']). PIPE (Revcollec
Tor ()). Pipe (Gulp.dest ('./view '));


});
    Develop and construct gulp.task (' Dev ', function (done) {condition = false; sequentially executes runsequence ([' Revcss '], [' Revhtmlcss '], [' Revjs '], [' Revhtmljs '], do
NE); });

Step three, open cmd, switch to the directory where the project is located, run

Gulp Dev

OK, finished ...