在我的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

在我看来，您有两个选择--两个选项都会使用hasher和缓存破坏插件：

1. 编写一个gulp任务，它将自动在CSS文件中的所有URL周围添加ASSET{ ... }。这将发生在连接之后和哈希/崩溃之前。既然你对这个问题很感兴趣，请告诉我，如果你想让我写那个任务的话。我建议你试一试，尽管你可能会学到一些整洁的东西。
2. 理想的解决方案：--缓存崩溃插件--有一个选项可以定义regex来查找资产。默认情况下，regex设置为/ASSET{(.*?)}/g，但您可以很容易地更新到与好的ol‘vanilla CSS url(...)相匹配的东西。同样，既然您有赏金，如果您需要帮助regex --但是我建议您尝试一下，b/c您可能会学到一些整洁的东西(pssst，您想忽略data: URL)。 在缓存半衰期配置中尝试这个regex： /url\((?!['"]?data:)['"]?([^'"\)]*)['"]?\)/g 如果您想忽略以"http“开头的URL(意思是它们托管在另一个域)，那么使用下面的regex。这假定您的资产的所有路径都是相对的，它们应该是： /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

Answer 2

您可以使用吞-转-全部。它可以向文件添加散列并重写它们，而不需要向SASS文件添加任何额外的标记。

同样的一个基本的吞咽文件看起来就像-

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创建了一个工作示例