Gulp Troubleshooting Publishing online file (CSS and JS) caching issues

Gulp Troubleshooting Publishing online file (CSS and JS) caching issues

the reason of this article: the current often online after the release of the document to constantly refresh the page and a long time, the page CSS and JS file to take effect, especially for the current time to do the mall, built-in browser cache is very serious, We used to fix the post-online caching problem by adding a timestamp to the file, but it doesn't work in the browser, so we need to change the file name to solve the problem of caching, so we use the suffix name plus MD5 string to solve the problem of caching;

We can first consider such a feature, I reference the CSS file on the page as follows:

./css/xx.css

./js/xx.js

I now want to rename the CSS file by using MD5 to automatically change to the following file on the page

./css/xx-34f3902a35.css

A: First we need to install the Gulp plugin, installation tutorial is as follows:

Http://www.cnblogs.com/tugenhua0707/p/4069769.html

Below we need to look at my entire directory structure as follows:

such as the above directory, in the SRC folder is to store all CSS files and JS files, gulp.html is the root directory, but before packaging, I put them in the SRC folder, as a source file, the root directory can be deleted first or put it there is no relationship; Make a copy of all the HTML files in the SRC folder as the source file;

The following is the source code for gulp.html:

Second: Install the plug-in

1. After running NPM init under the project root directory, some actions will survive a Package.json folder in the root directory;
2. After entering the project's root directory, execute the command to install the following plugins:

NPM Install–save-dev Gulp Gulp-concat gulp-minify-css Gulp-rev gulp-rev-collector

Now my Package.json becomes the following:

{  "Name": "Rev",  "Version": "1.0.0",  "description": "\" Test package\ "",  "Main": "Index.js",  "Scripts": {    "Test": "\" a common\ ""  },  "keywords": [    "Rev"  ],  "Author": "Tugenhua",  "License": "ISC",  "Devdependencies": {    "Gulp": "^3.9.0",    "Gulp-concat": "^2.6.0",    "Gulp-jshint": "^2.0.0",    "Gulp-less": "^3.0.5",    "Gulp-minify-css": "^1.2.1",    "Gulp-rename": "^1.2.2",    "Gulp-rev": "^6.0.1",    "Gulp-rev-collector": "^1.0.2",    "Gulp-uglify": "^1.5.1",    "Jshint": "^2.8.0"  }}

If you do not want to install, you can create a new Package.json file directly in the root directory of the project, directly copy the above Package.json code, the most critical is the devdependencies dependency, Others can be changed according to their own needs and then enter the project root directory to execute the command NPM install can survive the root directory node_modules module plug-in;

Three: Create a new Gulpfile.js file configuration at the root of the project

All configuration codes are as follows:

varGulp = require (' Gulp '));varConcat = require (' Gulp-concat ');//-Multiple files merged into one;varMinifycss = require (' gulp-minify-css ');//-Compress CSS into one line;varRev = require (' Gulp-rev ');//-add MD5 suffix to file namevarRevcollector = require (' Gulp-rev-collector ');//-Path SubstitutionGulp.task (' Concat ',function() {//-Create a task gulp.src named Concat (['./src/css/*.css '])//-CSS file to be processed, put in a string array//. Pipe (concat (' wrap.min.css '))//-the merged file name. Pipe (Minifycss ())//-compression processed into one line. Pipe (rev ())//-filename plus MD5 suffix. Pipe (Gulp.dest ('./dist/css '))//-Output File local. Pipe (Rev.manifest ())//-Generate a Rev-manifest.json. Pipe (Gulp.dest ('./rev '));//-Save Rev-manifest.json in Rev directory}); Gulp.task (' Rev ',function() {GULP.SRC (['./rev/*.json ', './src/*.html '])                        //-read Rev-manifest.json files and files that need to be replaced by CSS names
. Pipe (Revcollector ())    //-Perform a replacement of the CSS name within the file
. Pipe (Gulp.dest ('./'));     //-the directory where the file output is replaced}); Gulp.task (' Default ', [' concat ', ' rev ']);

As configured above, after the configuration is complete, enter the root directory to execute the command as follows:

Perform gulp concat this task to generate a Rev-mainfest.json file;

Then run Rev this task, replace the CSS file in the HTML file, after execution, the project directory structure becomes as follows:

Compared to the previous structure has been generated in the root directory Rev This file, the file has a Rev-manifest.json file, we can look at the file code as follows:

{  "gulp.css": "Gulp-34f3902a35.css"}

The Gulp.css file name needs to be changed to the existence of a MD5 suffix name files;

Then call Rev this task, first read all the HTML below src source file, need to replace the GULP.CSS with our generated file, we now look at the root of the generated gulp.html source code changed to the following:

You can see that the file has been replaced with a MD5 suffix name;

Note: Why do we need to back up a copy of all the HTML files in the project root directory to the SRC directory at the beginning? That's because every time we pack, MD5 's string of strings will be changed, we need a contrasting source file, we need to replace GULP.CSS to generate a series of CSS files with MD5, no matter how the MD5 string changes, We just need to add the gulp.css suffix to the generated MD5 string ~ Then if we don't back up, use your brains to imagine that each time you pack, the root directory will overwrite the source file, and the Rev-manifest.json code under the Rev folder will look like this:

{

"Gulp.css": "Gulp-57f9aab029.css",

"Gulp-57f9aab029.css": "Gulp-57f9aab02922222.css",

"Gulp-57f9aab02922222.css": "Gulp-57f9aab0292222aaaaaaa.css",

........

}

Every time you pack, he will find the source file on the page (the left side of the colon represents the current source file, the right side of the colon represents the name of the new file to be replaced); if we back up the HTML file, Then Rev-manifest.json will always be a replacement file, as follows:

{

"Gulp.css": "Gulp-57f9aab029.css"

}

Because it always finds the gulp.css on the source file and then replaces it with a new file name with the MD5 suffix, and of course, if you don't think you're backing it up, In Manifest.json survival How many of the value of the building is not related to, you can also do not backup, to see personal needs, such as just the presentation of CSS files, of course, JS file is the same configuration;

GitHub on Demo:Https://github.com/tugenhua0707/gulp-rev-collector

Gulp Troubleshooting Publishing online file (CSS and JS) caching issues