使用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 任务，该任务会自动添加ASSET{ ... }CSS 文件中的所有 URL。这会在串联之后和散列/破坏之前发生。既然您对这个问题有悬赏，请告诉我您是否希望我编写该任务。我建议你尝试一下，尽管你可能会学到一些巧妙的东西。

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

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

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

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