有没有办法可以使用 gulp 修改我的 index.thml 以防止 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 task, for more information check the docs. It might be a bit more work depending on your solution. But from what I see you could go with something simple as gulp-rev-replace 来完成。

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

Is there a way I can use gulp to modify my index.thml to prevent CSS caching?

javascript

build-process

browser-cache

node.js

gulp