快速使用 Gulp 刷新缓存

您绝对应该在 CSS 和 JavaScript（以及图像、字体和其他任何内容）等资产上 设置远期缓存标头。这告诉浏览器“基本上永远保留此文件”。这样，在网站上从一个页面导航到另一个页面时——或者重新访问它，或者刷新页面——浏览器就不需要再次下载它，从而产生更快的页面加载速度。这对于网页性能至关重要，所以一定要这样做！

但是，如何强制浏览器获取文件的最新版本呢？好吧，有很多方法。 查看该博文以了解更多信息。但这里有一个我最近使用过并希望记录下来的方法。

技巧是更改查询字符串

曾经有一段时间，普遍认为更改查询字符串是不够的，但即使在当时，它也不会起作用的原因也几乎都是极端情况。如今，更改查询字符串是可以的（假设您不更改默认行为，像 Cloudflare 这样的服务允许您这样做）。

因此，有一天您在 HTML 中这样发布它

<link rel="stylesheet" href="style.css?v=1" />

然后您更改该查询字符串以在需要时刷新缓存

<link rel="stylesheet" href="style.css?v=2" />

顺便说一下，HTML 要么未被缓存，要么缓存时间要短得多，因此将看到对 HTML 的更改。

我有时手动操作

多年来，我一直通过设置 PHP 变量并使用它来刷新此网站上的缓存，例如…

<?php $ver = 1.0; ?>

<link rel="stylesheet" href="style.css?v=<?php echo $ver; ?>" />
<link rel="stylesheet" href="some-other-asset.css?v=<?php echo $ver; ?>" />

嘿，这有效，但那是我手动操作该变量。我有时会忘记这样做，即使我记住了，我多少也有些讨厌不得不这样做。

使用 Gulp 自动化版本刷新

我目前在此站点上使用 Gulp 支持的构建流程，它执行所有经典操作：Sass、Babel、文件连接、实时重新加载…

我突然想到，我也可以让 Gulp 在每次更改 CSS 或 JavaScript 时更改查询字符串。JavaScript 具有 .replace() 方法，并且可以通过 gulp-replace 插件轻松地在 Node/Gulp 中使用。

我创建了一个任务。当我调用它时，它会在我的标题文件中查找字符串 cache_bust= 加上某个值，并用基于日期和时间的新的随机字符串替换它。

gulp.task("cache-bust-css", function() {
  var cbString = new Date().getTime();
  return gulp
    .src(["header.php"])
    .pipe(
      replace(/cache_bust=\d+/g, function() {
        return "cache_bust=" + cbString;
      })
    )
    .pipe(gulp.dest("."));
});

当编辑和编译 JavaScript 文件时，我在一个单独的任务中执行相同操作。

它仍然有点笨拙

请注意，我每次更改任何 CSS 资产时都会更改所有 CSS 资产的查询字符串。这不像它那样高效。我可能应该只在已更改的文件上更改查询字符串。

我最终会解决这个问题。有时您只需要逐步改进解决方案。

---

这只是其中一种方法！还有其他专门用于此的 Gulp 插件。其他构建系统有不同的方法。这种方法碰巧非常适合我当时的确切需求。欢迎分享您的策略！