缓存在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运行都可以自动更改查询参数,我会很高兴使用它.

有关如何实现这一目标的任何想法,或者是否有可能实现？

我想这样做的原因是我不断开发我的应用程序,我使用一个大的精灵表,经常重新安排,缓存清除是一个要求,如果它可以自动当吞咽运行,这将节省我很多时间和精力.

谢谢

Answer 1

使用 @Amo 的答案作为灵感，我最终使用的解决方案是 a mixin，它利用该unique_id()函数生成随机值。这避免了必须定义自定义SASS函数，因此它更简单，并且正如@Amelia 指出的那样，也更干净一些。

混音

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