缓存SASS文件内部链接的图像 [英] Cache busting images which are linked inside SASS files

问题描述

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

然而，这对CSS，图像和JavaScript非常有用;是否有可能让Elixir缓存半身像在CSS / SASS中链接的图像？确定它足够容易地对图像进行版本化，但有没有一种调整CSS以反映新文件名的方法？

我发现了这个： https://github.com/trentearl/gulp-css-url-adjuster
它可以让你将一个查询参数追加到CSS文件中的文件路径中，这样就解决了一半的问题。如果可以在每次运行gulp时自动更改查询参数，我会很高兴使用它。

有关如何实现这一点的任何想法，或者如果它甚至有可能吗？

我想这样做的原因是我不断开发我的应用程序，并且我使用了一个经常重新排列的大型精灵表，一个要求，如果它可以是自动运行的吞咽，这将节省我很多时间和精力。

谢谢

解决方案

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

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.

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?

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?

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.

Thanks

解决方案

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.

The mixin

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

Example

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

Result

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

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