javascript - 有没有办法使用 gulp 修改我的 index.html 以防止 CSS 缓存？

Question

我有这个 gulpfile.js 代码:

gulp.task('make_prod_index', function () {
    gulp.src('index.html')
      .pipe(replace('content/bundles/css.min.css', 'content/bundles/css.min.css&12345'))
      .pipe(rename("index-prod.html"))
      .pipe(gulp.dest('./'));
});

我想到的是是否可以将 gulpfile 添加到 & 中，后跟每次发布时都不同的数字。

这是否是确保 css 不被缓存的一种方法？如果是，我如何确保每次发布时添加不同的数字？

Answer 1

您可以轻松获取文件的 md5 哈希值并将其附加到文件中，如下所示:

...
var md5File = require('md5-file')

gulp.task('make_prod_index', function () {
    gulp.src('index.html')
      .pipe(replace('content/bundles/css.min.css', 'content/bundles/css.min.css?' +  md5File('content/bundles/css.min.css')))
      .pipe(rename("index-prod.html"))
      .pipe(gulp.dest('./'));
});

但是，最好更改大多数缓存的文件名，以避免附加查询字符串。某些缓存会将带有查询字符串的文件视为动态文件，并且不会缓存它们。

可以通过 gulp-rev 来完成任务，有关更多信息，请查看 docs 。根据您的解决方案，这可能需要更多工作。但从我看来，你可以选择简单的东西，如 gulp-rev-replace .