使用gulp打包增加hash值，解决浏览器缓存问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cofecode/article/details/82084737

前端项目部署后，用户必须强刷浏览器后才能看到最新的代码（和效果），这种体验不是很好，而有的用户根本不知道强刷浏览器这么一回事。

其实最好的办法就是给js和css增加一个版本号，或者说是一个hash值，看了下使用vue-cli搭建的项目，最后打完包后，都会生成一个随机的hash值。其实就是为了避免缓存。

这里使用gulp 的gulp-rev插件就可以给打包的js或者css增加一个hash值，注意，这里的hash值生成是随机的，这就意味着每个文件带着的hash值是不一样的。

如果希望文件携带的hash值是一样的话，就必须使用gulp-rename 重新命名。

使用完gulp-rev后，js文件名变了，css文件名也变了。在html引入的时候也需要发生变化才行，不然引入就有问题。

这里就要另外一个插件了gulp-rev-collector

gulp.task('js', function() {
  return gulp.src('src/myjs/**/*.js')
  .pipe(babel({
    presets: ['env']
  }))
  .pipe(javascriptObfuscator())
  .pipe(uglify())
  // .pipe(rename({suffix:hashNum}))
  .pipe(rev())
  .pipe(gulp.dest('dist/myjs/'))
  .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
    .pipe(gulp.dest('dist/rev'))
});

生成的一个json映射表，长这个样子

{
  "attention/myAttention.js": "attention/myAttention-01d5fe6660.js",
  "footer.js": "footer-ca5643ca7d.js",
  "header.js": "header-cb5d6eb816.js",
}

其实就是生成一个映射表，然后按照这个映射表进行替换。

那如果我们用到了统一的hash值的话，在html页面上替换，就需要使用到gulp-replace进行替换了

给引入路径的.js 替换成 hash值+ ‘.js’就可以了