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运行时节省了我很多时间和精力。

由于

Answer 1

当您使用SASS时，可以在SASS文件中定义可用于缓存清除的自定义变量，然后将该变量附加到任何图像URL路径。

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

为此，您需要create a new function in 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');
}

Answer 2

使用@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)"; }

Answer 3

我正在使用gulp-sass和@AJReading mixin没有正确地连接字符串，编译为：

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

以下是我的案例

<强>密新

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

缓存在SASS文件中链接的破坏图像

3 个答案: