缓存清除SASS文件内链接的图片

Question

我对 Laravel 5.0 比较新，但是对 PHP 不陌生。我一直在使用 Elixir 来编译 SASS，复制我的资源目录中的图片，并通过 mix.version 函数运行它们来防止缓存。

这对于 CSS、图片和 JavaScript 非常有效，但是，Elixir 是否能够使我的 CSS/SASS 中链接的图片也实现缓存失效呢？版本化图片很容易，但是否有一种方法可以调整 CSS 以反映新文件名呢？

我发现了这个工具：https://github.com/trentearl/gulp-css-url-adjuster，它允许您在 CSS 文件中的文件路径后附加查询参数，因此这解决了一半的问题。如果每次运行 gulp 时自动更改查询参数，我将非常乐意使用它。

有什么想法可以实现这一点，或者是否可能吗？

我之所以想这样做，是因为我不断地开发我的应用程序，我使用一个大的雪碧图表，经常需要重新排列，缓存失效是必需的，如果能够在 gulp 运行时自动完成这些操作，那就可以省去我很多时间和精力。

谢谢

- AJReading

Answer 1

参考@Amo的答案，我采用了一个mixin方案，利用unique_id()函数生成随机值。这避免了需要定义自定义SASS函数，因此更简单，正如@Amelia指出的那样，也更清洁。

mixin方案

@mixin background-cache-bust($url) {
    background-image: #{'url('} + $url + #{'?v='} + unique_id() + #{')'};
}

例子

.sprite {
    @include background-cache-bust('/build/images/common/sprite.png');
}

结果

.sprite {
    background-image: "url(/build/images/common/sprite.png?v=u95ab40e0)";
}

- AJReading

---

最好更改路径而不是使用查询字符串，然后在Web服务器上重写路径。 - Hades

这样做有什么好处呢？无论如何，浏览器都会将查询参数视为不同的URL。通过更改路径并通过服务器进行重写会产生额外的复杂性层，这是仅使用Sass无法实现的。 - AJReading

查询字符串方法不是最佳的缓存破坏实践，并且在某些情况下可能会失败。一些浏览器不会将不同的查询字符串视为不同的文件，而一些软件（我听说：Squid）不会缓存带有查询字符串的文件。此外，使用查询字符串方法会阻止像IIS这样的Web服务器提供ETag标头，这允许浏览器检查缓存的有效性，而不仅仅依赖到期日期/时间。 - Hades

Answer 2

由于您正在使用SASS，因此可以在SASS文件中定义自定义变量，用于缓存破坏，并将该变量附加到任何图像URL路径中。

该变量只需要保存对当前时间戳的引用即可。

要实现这一点，您需要在SASS中创建一个新函数来公开时间戳，可以按照以下方式完成：请参考SASS文档。

module Sass::Script::Functions
    def timestamp()
        return Sass::Script::String.new(Time.now.strftime("%Y%m%d%H%M"))
    end
end

然后您可以按以下方式访问时间戳：

$cacheVersion = timestamp()

.someClass {
    background-image: url('your/path/file.jpg?cacheversion='$cacheVersion);
}

编译后，这将产生类似以下的内容：

.someClass {
    background-image: url('your/path/file.jpg?cacheversion=201510091349');
}

- Amo

---

这里最好使用 mixin，将给定的链接作为 url($link?v=$timestamp) 返回。 - Amelia

这实际上是一个好主意。我一直在用 elixir 或 gulp 来解决这个问题，但实际上，添加时间戳意味着每次编译 SASS 时都会更改它（在开发过程中会经常发生），但一旦最新更改部署到他们的环境中后，这并不重要。 - AJReading

Answer 3

我正在使用gulp-sass，@AJReading mixin无法正确地连接字符串，编译后结果为：

background-image: url(+ "$url" + ?v= + u2f58eec1 + );

这是我的情况下有效的内容。

混合。

（原文已保留HTML格式）

@mixin background-cache-bust($url) {
   background-image: unquote('url(' + $url + '?v=' + unique_id() + ')');
}

- Khang Lu