代码更新，app内嵌的h5页面无法获取最新代码

场景：

项目中更新了图片、css样式和js文件，测试重新拉代码部署环境，发现在app内图片和样式依旧没有改变，app内怎么清除缓存都没用，最后将app重装之后就可以了，以为是包的问题，所以测试环境下没有重视这个问题。但是上线后，发现依旧存在这个问题。

问题查找过程：

查看页面源文件，发现还是第一次的文件内容
让运维将cdn缓存清除
页面清除缓存后，查看源文件，仍然不是最新的代码
查看测试给运维的包是否正确，结果给运维的包是最新代码
在文件后加上时间戳，发现获取的是最新的代码（这缓存也太厉害了吧，清除浏览器缓存都没有用~~~）

问题解决方法：

打包时，使用gulp-rev和gulp-rev-collector给打包后文件名增加时间戳，并将引用文件名替换。我们给图片、css文件和js文件都加上了时间戳。

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('dist/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'));
});

上线后，发现有些图片无法加载出来，发现原因之一是我们只将css内引用的图片名字按照manifest文件映射关系进行了替换，而实际上在js文件中也使用了图片，该图片名没有被替换，所以找不到。为了解决这一问题，只对图片进行了压缩，而没有给图片加时间戳。

新问题出现：

代码重新上线后，发现很多图片都直接404了，查找发现，线上的图片数量比测试给运维的上线包少。（运维上线可以直接执行脚本，脚本里有顺序执行命令(正确吗？？)？？）。最后是运维一条一条执行命令，首先解压，查看解压后文件，正确！！！但是，这个时候又出现了第一次的缓存问题！！！

原因：

经过查找，发现是打包时的顺序有问题：我们是将css，image和js先压缩并给文件加时间戳，然后将css中文件名按照manifest文件映射关系进行替换，最后将html中引用的css文件和js文件名manifest文件映射关系进行替换。这个其实就存在问题了，因为在css源文件中，引用的图片名称没有改变，此时进行文件压缩和文件名加时间戳（gulp认为文件没有改变，所以二次加的时间戳是一样的），然后再将css文件内引用的图片名称替换，由于css文件名并没有改变，所以因为强大的缓存问题，css文件内的图片名称还是第一次的（带时间戳）。

解决方法：

改变gulp中的顺序，即：先将css和js压缩，将image压缩并增加时间戳，然后按照manifest文件映射关系将css和js中的image名称替换并给css文件和js文件增加时间戳。

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('dist/css'));
});

gulp.task('scripts', function () {
    return gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
// 将css文件内图片名称替换，并给css文件增加版本号
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("manifest-css.json"))
           .pipe(gulp.dest('rev/css'));
});
// 将js文件内图片名称替换，并给css文件增加版本号
gulp.task("replacJs", function () {
    return gulp.src(['rev/**/manifest-image.json', 'src/js/*.js'])
           .pipe(revCollector())
           .pipe(gulp.dest('dist/js'))
           .pipe(clean())
           .pipe(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'));
});