caching - 使用 Gulp 在我的 CSS 中缓存半身像背景图像，而无需编辑我的 SASS？

Question

我想在 CSS 中缓存半身像背景图像。所以如果我原来的风格是:

.one {
  background: url(image.png);
}

可以添加字符串:

.one {
  background: url(image.png?1234);
}

或者可以更改文件名:

.one {
  background: url(image-1234.png);
}

与其使用随机生成器或时间戳 ID，不如使用图像文件的哈希值，以便仅在需要时(当文件实际更改时)才破坏缓存。

我正在使用 SASS 和 Gulp，所以我可以使用 Gulp Cache Buster 和 Gulp Hasher:

https://github.com/disintegrator/gulp-hasher

https://github.com/disintegrator/gulp-cache-buster

我遇到的问题是，您似乎需要修改您的 SASS。所以如果你从这个开始:

.logo {
  background: url(assets/images/logo.svg);
}

您需要将其更改为:

.logo {
  background: url(ASSET{assets/images/logo.svg});
}

我想让我的 SASS 保持良好和干净，而不是以这种方式修改它。这可能吗？

Answer 1

在我看来，您有两个选择 - 两者都将使用您列出的哈希器和缓存清除插件:

1. 编写一个 gulp 任务，该任务会自动在 CSS 文件中的所有 URL 周围添加 ASSET{ ... }。这将发生在连接之后和散列/破坏之前。既然您对这个问题有悬赏，请告诉我您是否希望我编写该任务。我建议你尝试一下，尽管你可能会学到一些巧妙的东西。

2. 理想的解决方案:缓存清除插件有一个选项，用于定义用于查找 Assets 的正则表达式。默认情况下，正则表达式设置为 /ASSET{(.*?)}/g，但您可以轻松更新为匹配良好的普通 CSS url(...) 。再说一次，既然你有赏金，如果你需要正则表达式的帮助，请告诉我 - 但我建议你尝试一下，因为你可能会学到一些巧妙的东西(pssst，你想忽略数据: 网址)。

   在缓存破坏配置中尝试这个正则表达式:
   /url\((?!['"]?data:)['"]?([^'"\)]*)['"]?\)/g

   如果您想忽略以“http”开头的 URL(意味着它们托管在另一个域上)，请使用以下正则表达式。这假设您的 Assets 的所有路径都是相对的，它们应该是:
   /url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)['"]?\)/g
   http://www.regexpal.com/?fam=94251

   如果您希望能够定义具有哈希/破坏 URL 的 CSS 属性，您可以使用以下内容，该属性仅适用于 background、background- 中定义的 URL image 和 list-style CSS 属性。您可以通过在 |list-style 之后添加管道 | 以及属性名称来添加更多内容:
   /(?:background(?:-image)?|list-style)[\s]*:[^\r\n;]*url\((?!['"]?(?:data |http):)['"]?([^'"\)]*)/g
   http://www.regexpal.com/?fam=94252