Question

由于这个原因，我一直在努力以大胆的方式

我已经使用gulp-rev将哈希值设置为所有html文件的名称，并且它们都在清单文件中匹配。我也使用gulp-rev-collector来匹配所有更新的哈希值。

我确定客户端文件的任何内容是否已更改，在gulp之后会得到新的哈希文件名构建，但浏览器不会更新和请求新文件，在我清理缓存并进行硬重载之前，它仍然使用旧的缓存文件。这是下面的简化代码：

gulp-rev

gulp.task('minify:html', function () {
var options = {
  removeComments: true,
  collapseWhitespace: true,
  collapseBooleanAttributes: false,
  removeEmptyAttributes: false,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  minifyJS: true,
  minifyCSS: true
};
return gulp
.src([paths.src.html, '!./node_modules/**/*.html', '!./templates/**/*.html', '!./index.html', 
'!./dist/**/*.html']) //  views  
.pipe(htmlmin(options))
.pipe(rev())
.pipe(gulp.dest('./dist'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist/rev/html'))

})

修订版视图

gulp.task('revDistViews', function () {
  return gulp.src(['./dist/rev/**/*.json', './dist/views/*.html'])
    .pipe( revCollector({
      replaceReved: true,
    }) )
    .pipe( gulp.dest('./dist/views') );
})

大流量建立

gulp.task('build', function (callback) {
runSequence('clean:dist', 'clean:views', 'scss', 'concat:js', 'file:include', 'copy:lib', 
'copy:locales', 'copy:img', 'minify:html', 'minify:index', 'minify:scripts', 
'revImages','minify:css', 'rev', 'revDistViews','revScripts', callback)
})

我可以看到内置/ dist文件夹后哈希值发生了变化。但是Chrome仍然使用旧的Cache而不是新文件

客户端可以使用任何解决方案吗？

注意：响应标头中未设置任何缓存策略

哈希已更新，但浏览器仍使用gulp-rev

0 个答案: