如何在不编辑SASS的情况下，使用Gulp使我的CSS中背景图片缓存失效？

Question

我希望能够在我的CSS中进行缓存破坏，以便于背景图片。如果我的原始样式是：

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

可以添加字符串：

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

或者文件名可以更改：

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

与其使用随机生成器或时间戳，我想使用图像文件的哈希值来使缓存在必要时（即文件实际更改时）才被清除。

我正在使用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干净整洁，不以这种方式进行修改。这可行吗？

- Evanss

Answer 1

我认为你有两个选择——两者都需要使用你列出的哈希和缓存插件：

1. 编写一个 Gulp 任务，自动在 CSS 文件中的所有 URL 周围添加 ASSET{ ... }。这将发生在连接后且哈希/破坏之前。由于您对此问题有悬赏，请告诉我是否需要我编写该任务。我建议您自己尝试一下，因为您可能会学到一些有趣的东西。

2. 理想解决方案：缓存破坏插件有一个选项，用于定义要查找资源的正则表达式。默认情况下，正则表达式设置为 /ASSET{(.*?)}/g，但您可以轻松更新以匹配好老的香草 CSS 的 url(...)。同样，由于您对此问题有悬赏，请告诉我是否需要有关正则表达式的帮助-但我建议您尝试一下，因为您可能会学到一些有趣的东西（嘘，您要忽略 data: URL）。

   在缓存破坏配置中尝试此正则表达式：
   /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

- Ryan Wheale

Answer 2

你可以使用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上创建了一个可行的示例。

- Prayag Verma