缓存在 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 运行s.
自动更改查询参数,我会很乐意使用它
关于如何实现这一点,或者是否可能,有什么想法吗?
我想这样做的原因是我一直在开发我的应用程序并且我使用了一个经常重新排列的大精灵 sheet,缓存破坏是一个要求,如果它可以自动gulp 运行这会节省我很多时间和精力。
谢谢
当您使用 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');
}
从@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)";
}
我正在使用 gulp-sass 并且 @AJReading mixin 没有正确连接字符串,编译为:
background-image: url(+ "$url" + ?v= + u2f58eec1 + );
以下是我的情况
混音
@mixin background-cache-bust($url) {
background-image: unquote('url(' + $url + '?v=' + unique_id() + ')');
}
我是 Laravel 5.0 的新手,但不是 PHP。我一直在使用 Elixir 来编译我的 SASS,从我的资源目录复制图像并通过 mix.version
函数 运行 它们来防止缓存。
然而,这对 CSS、图像和 JavaScript 非常有用;是否也可以让 Elixir 缓存清除我的 CSS/SASS 中链接的图像?当然,对图像进行版本控制很容易,但是有没有办法调整 CSS 以反映新文件名?
我发现了这个:https://github.com/trentearl/gulp-css-url-adjuster 它允许您将查询参数附加到 CSS 文件中的文件路径,这样就解决了一半的问题。如果可以每次 gulp 运行s.
自动更改查询参数,我会很乐意使用它关于如何实现这一点,或者是否可能,有什么想法吗?
我想这样做的原因是我一直在开发我的应用程序并且我使用了一个经常重新排列的大精灵 sheet,缓存破坏是一个要求,如果它可以自动gulp 运行这会节省我很多时间和精力。
谢谢
当您使用 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');
}
从@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)";
}
我正在使用 gulp-sass 并且 @AJReading mixin 没有正确连接字符串,编译为:
background-image: url(+ "$url" + ?v= + u2f58eec1 + );
以下是我的情况
混音
@mixin background-cache-bust($url) {
background-image: unquote('url(' + $url + '?v=' + unique_id() + ')');
}