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

【问题标题】：Cache bust background images in my CSS with Gulp without having to edit my SASS?使用 Gulp 在我的 CSS 中缓存半身像背景图像而无需编辑我的 SASS？
【发布时间】：2016-05-30 15:47:10
【问题描述】：

我想在我的 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 干净整洁，而不是这样修改它。这可能吗？

【问题讨论】：

标签： caching gulp

【解决方案1】：

您可以使用gulp-rev-all。它将能够向文件添加哈希并重写它们，而无需向您的 SASS 文件添加任何额外的标记。

一个非常基本的 gulp 文件看起来像 -

var gulp = require('gulp');
var sass = require('gulp-sass');
var RevAll = require('gulp-rev-all');

gulp.task('default', function () {

var revAll = new RevAll({dontRenameFile: ['index.html']});

gulp.src(['app.sass'])
.pipe(sass().on('error', sass.logError))
.pipe(revAll.revision())
.pipe(gulp.dest('build'));

gulp.src(['**.jpg','**.png','**.gif'])
.pipe(revAll.revision());

return gulp.src('index.html')
.pipe(revAll.revision())
.pipe(gulp.dest('build'));

});

注意：使用dontRenameFile选项排除html文件被修订

我在https://github.com/pra85/gulp-sass-filerev创建了一个工作示例

【讨论】：

【解决方案2】：

在我看来，您有两个选择 - 两者都将使用您列出的哈希和缓存破坏插件：

编写一个 gulp 任务，它会自动在 CSS 文件中的所有 URL 周围添加 ASSET{ ... }。这会发生在after 连接和before 散列/破坏。既然你对这个问题有很大的帮助，请告诉我你是否希望我写这个任务。我建议你尝试一下，尽管你可能会学到一些巧妙的东西。
理想的解决方案： 缓存清除插件有一个用于定义正则表达式以用于查找资产的选项。默认情况下，正则表达式设置为/ASSET{(.*?)}/g，但您可以轻松更新为匹配好的ol' vanilla CSS url(...)s。再说一次，既然你有赏金，让我知道你是否需要正则表达式的帮助 - 但我建议你尝试一下 b/c 你可能会学到一些简洁的东西（pssst，你想忽略data: URLs）。

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

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

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

【讨论】：