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

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

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

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

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

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

感谢

来源

2015-09-29 AJReading

使用答案m @Amo的灵感来源，我最终使用的解决方案是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)"; 
}

来源

2015-10-09 20:07:43 AJReading

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

这会更好吗？无论如何，浏览器会将查询参数视为不同的URL。通过服务器改变路径和重写会产生一个额外的复杂层，这是Sass无法实现的。 – AJReading

查询字符串方法不是缓存清除的最佳接受方法，并且在某些情况下可能会失败。有些浏览器没有看到不同的查询字符串作为不同的文件和一些软件（我听说：Squid）不会用查询字符串缓存文件。此外，使用查询字符串方法，可以防止像IIS这样的Web服务器提供ETag标头，它允许浏览器检查缓存有效性，而不仅仅依赖于过期日期/时间。 – Hades

当你使用SASS，它可以定义你的SASS文件自定义变量，它可以用来清除缓存，然后该变量附加到任何图像的URL路径。

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

要做到这一点，你需要create a new function in SASS暴露时间戳，这是可以做到如下：

$cacheVersion = timestamp() 

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

当：

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

然后你就可以按如下方式访问时间戳编译后，这会产生类似于：

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

来源

2015-10-09 12:52:28 Amo

可能会更好，在这里做一个mixin和回报给定的链接为'url（$ link？v = $ timestamp）' – Amelia

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

我使用吞-SASS和@AJRead荷兰国际集团混入不concantenate字符串正确，它编译成：

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

这里是我的情况下，是什么在起作用

密新

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

来源

2016-10-06 07:07:22

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

回答

相关问题