Code update, App-embedded H5 page doesn't get the latest code

Scene:

The project updated the picture, CSS style and JS file, test the re-pull code deployment environment, found in the app image and style is still unchanged, the app how to clear the cache is useless, and finally the app reload after it, thought it is the problem of the package, so the test environment does not pay attention to this problem. However, after the online, found that the problem still exists. Problem Lookup Process: View the page source file, find the first time the contents of the file let operations to clear the CDN cache cleared page After the cache, view the source file, still not the latest code to see the test to operations package is correct, the result to the operation of the package is the latest code after the file with a timestamp, Find the latest code (the cache is too powerful, clear the browser cache is not used ~ ~ ~) Problem Resolution method:

When packaging, use Gulp-rev and gulp-rev-collector to add a timestamp to the packaged file name and replace the reference file name. We have added timestamps to images, CSS files, and JS files.

var gulp = require (' gulp ');
var clean= require ("Gulp-clean");
var uglify = require ("gulp-uglify");
var cleancss = require ("Gulp-clean-css"), var imagemin = require ("Gulp-imagemin");
var rev = require (' Gulp-rev ');

var revcollector = require (' Gulp-rev-collector ');
        Gulp.task (' Image ', function () {return gulp.src (' src/image/* '). Pipe (Imagemin ()). Pipe (rev ())
. Pipe (Gulp.dest (' Dist/image ')). Pipe (Rev.manifest ()). Pipe (Gulp.dest (' rev/image '));
});
        Gulp.task (' CSS ', function () {return gulp.src (' src/css/*.css '). Pipe (Cleancss ()). Pipe (rev ())
. Pipe (Gulp.dest (' dist/css ')). Pipe (Rev.manifest ()). Pipe (Gulp.dest (' rev/css '));

}); Gulp.task (' Scripts ', function () {return gulp.src (' src/js/*.js '). Pipe (Uglify ()). Pipe (gulp.dest (' Dis
T/js '). Pipe (Rev.manifest ()). Pipe (Gulp.dest (' Rev/js '));

}); Gulp.task ("Rev", function () {return gulp.src ([' Rev/**/*.json ', ' TemplatEs/**/*.html ']). Pipe (Revcollector ()). Pipe (Gulp.dest (' dist ')); });

On-line, found that some pictures can not be loaded out, found that one of the reasons is that we only the CSS referenced in the name of the image according to the manifest file mapping relationship was replaced, and actually in the JS file also used the picture, the picture name is not replaced, so cannot find. To solve this problem, only the image is compressed, and the picture is not timestamp. New issues arise:

After the code re-online, found a lot of pictures are directly 404, find that the number of online pictures than the test to the operation of the online package less. (The operation of the line can be directly executed script, the script in order to execute the command (correct?). )。。 ）。 Finally, operation and maintenance of a command, first decompression, check the extracted files, correct ... However, this time there is the first time the caching problem ... Reason:

After searching, we find that the order of packing is problematic: we will compress Css,image and JS first and timestamp the file, then replace the filename in the CSS with the manifest file mapping. Finally, the CSS file referenced in HTML and the JS filename manifest file mapping relationship are replaced. This actually has the problem, because in the CSS source file, the reference picture name has not changed, at this time the file compression and the filename timestamp (gulp that the file has not changed, so two times the timestamp is the same), and then the CSS file in the reference to replace the picture name, Because the CSS file name has not changed, so because of the strong cache problem, the image name inside the CSS files is the first time (with timestamp). Workaround:

Change the order in the gulp, that is: first, the CSS and JS compression, image compression and increase the timestamp, and then follow the manifest file mapping relationship between CSS and JS image name substitution and add time stamp to the CSS file and JS file.

var gulp = require (' gulp ');
var clean= require ("Gulp-clean");
var uglify = require ("gulp-uglify");
var cleancss = require ("Gulp-clean-css"), var imagemin = require ("Gulp-imagemin");
var rev = require (' Gulp-rev ');

var revcollector = require (' Gulp-rev-collector ');
        Gulp.task (' Image ', function () {return gulp.src (' src/image/* '). Pipe (Imagemin ()). Pipe (rev ())
. Pipe (Gulp.dest (' Dist/image ')). Pipe (Rev.manifest ("Manifest-image.json")). Pipe (Gulp.dest (' rev/image '));
}); Gulp.task (' CSS ', function () {return gulp.src (' src/css/*.css '). Pipe (Cleancss ()). Pipe (gulp.dest (' Dis
T/css '));

}); Gulp.task (' Scripts ', function () {return gulp.src (' src/js/*.js '). Pipe (Uglify ()). Pipe (gulp.dest (' Dis
T/js '));
}); Replace the image name inside the CSS file and add the version number Gulp.task ("Replaccss", function () {return gulp.src (' Rev/**/manifest-image.json ', ' src
      /css/*.css ']). Pipe (Revcollector ()). Pipe (Gulp.dest (' dist/css '))     . Pipe (Clean ()). Pipe (rev ()). Pipe (Gulp.dest (' dist/css ')). Pipe (Rev.manifest ("Manifes
T-css.json ")). Pipe (Gulp.dest (' rev/css '));
}); Replace the image name in the JS file and add the version number Gulp.task ("Replacjs", function () {return gulp.src (' Rev/**/manifest-image.json ', ' src/j ') to the CSS file. S/*.js ']). Pipe (Revcollector ()). Pipe (Gulp.dest (' Dist/js ')). Pipe (Clean ()). Pi PE (rev ()). Pipe (Gulp.dest (' Dist/js ')). Pipe (Rev.manifest ("Manifest-js.json")). Pipe (gulp.
Dest (' Rev/js '));
}); Gulp.task ("Rev", function () {return gulp.src ([' Rev/**/*.json ', ' templates/**/*.html ']). PIPE (Revcollector
()). Pipe (Gulp.dest (' dist ')); });