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

我看到它的方式你有两个选择 - 两个选项都会使用你列出的hasher和cache busting插件：

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

理想解决方案：缓存清除插件可以选择定义用于查找资产的正则表达式。默认情况下，正则表达式设置为/ASSET{(.*?)}/g，但您可以轻松更新为匹配好的'vanilla CSS url(...)。再说一遍，因为你有赏金让我知道你是否需要正则表达式的帮助 - 但我建议你采取刺激它b / c你可能会学到一些整洁的东西（pssst，你想忽略data: URL）。

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

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

如果您希望能够定义具有散列/已破坏网址的CSS属性，则可以使用以下内容，该属性仅适用于background，background-image和{中定义的网址{1}} CSS属性。您可以通过在list-style之后添加管道|以及属性名称来添加更多内容：
|list-style
http://www.regexpal.com/?fam=94252

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

创建了一个工作示例

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

2 个答案: