缓存在 SASS 文件中链接的破坏图像 [英] Cache busting images which are linked inside SASS files

问题描述

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

I'm fairly new to Laravel 5.0, but not to PHP. I've been playing around with Elixir to compile my SASS, copy images from my resource directory and run them through the mix.version function to prevent caching.

不过，这对 CSS、图像和 JavaScript 非常有用；是否也可以让 Elixir 缓存在我的 CSS/SASS 中链接的图像?当然，对图像进行版本控制很容易，但有没有办法调整 CSS 以反映新的文件名?

This works great for CSS, images and JavaScript, however; is it possible to have Elixir cache-bust the images linked in my CSS/SASS as well? Sure it's easily enough to version the images but is there a way of adjusting the CSS to reflect the new filenames?

我发现了这个:https://github.com/trentearl/gulp-css-网址调整器它允许您将查询参数附加到 CSS 文件中的文件路径，这样就解决了一半的问题.如果可以在每次 gulp 运行时自动更改查询参数，我会很乐意使用它.

I discovered this: https://github.com/trentearl/gulp-css-url-adjuster which allows you to append a query parameter to the file paths in a CSS file, so that is half of the problem solved. I would be quite happy to use this if it were possible to automatically change the query parameter each time gulp runs.

有什么想法可以实现，或者是否有可能?

Any thoughts on how this can be achieved, or if it is even possible?

我想这样做的原因是我一直在开发我的应用程序，并且我使用一个经常重新排列的大型精灵表，缓存破坏是一项要求，如果它可以在 gulp 运行时自动运行，那将节省我很多时间和精力.

The reasons I would like to do this is I'm constantly developing my app and I use a large sprite sheet which is often rearranged, cache busting is a requirement, and if it could be automatic when gulp runs that would save me a lot of time and effort.

谢谢

推荐答案

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

Using the answer from @Amo for inspiration, the solution I ended up using was a mixin, which makes use of the unique_id() function to generate a random value. This avoids having to define a custom SASS function, so it's simpler and as @Amelia pointed out, a bit cleaner too.

混入

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

这篇关于缓存在 SASS 文件中链接的破坏图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！