使用 Gulp 在我的 CSS 中缓存半身像背景图像而无需编辑我的 SASS? [英] Cache bust background images in my CSS with Gulp without having to edit my SASS?
问题描述
我想在我的 CSS 中缓存半身像背景图片.所以如果我原来的风格是:
I want to cache bust background images in my CSS. So if my original style is:
.one {
background: url(image.png);
}
可以添加一个字符串:
.one {
background: url(image.png?1234);
}
或者可以更改文件名:
.one {
background: url(image-1234.png);
}
与其使用随机生成器或时间戳 id，不如使用图像文件的哈希值，以便仅在需要时(当文件实际更改时)才清除缓存.
Rather than using a random generator or a timestamp id like to use a hash of the image file so that the cache is only busted when needed (when the file has actually changed).
我正在使用 SASS 和 Gulp，所以我可以使用 Gulp Cache Buster 和 Gulp Hasher:
Im using SASS and Gulp so I could use Gulp Cache Buster and Gulp Hasher:
https://github.com/disintegrator/gulp-hasher
https://github.com/disintegrator/gulp-cache-buster
我遇到的问题是您似乎需要修改您的 SASS.所以如果你从这个开始:
The issue I have with these is that it looks like you need to modify your SASS. So if you start with this:
.logo {
background: url(assets/images/logo.svg);
}
你需要把它改成这样:
.logo {
background: url(ASSET{assets/images/logo.svg});
}
我想保持我的 SASS 干净整洁，而不是这样修改它.这可能吗?
I want to keep my SASS nice and clean and not modify it in this way. Is this possible?
推荐答案
在我看来，您有两个选择 - 两者都将使用您列出的哈希和缓存破坏插件:
The way I see it you have two options - both of which would use the hasher and cache busting plugins you listed:
编写一个 gulp 任务，它会自动在 CSS 文件中的所有 URL 周围添加
ASSET{ ... }.这将发生在 after 连接和 before 散列/破坏.既然你在这个问题上有赏金，让我知道你是否想让我写那个任务.我建议你尝试一下，尽管你可能会学到一些巧妙的东西.
Write a gulp task that would automatically add
ASSET{ ... }around all of the URLs in your CSS file. This would happen after concatenation and before hashing/busting. Since you have a bounty on this question, let me know if you would like me to write that task. I suggest you take a stab at it though b/c you might learn some neat things.
理想的解决方案:缓存清除插件有一个选项用于定义正则表达式以用于查找资产.默认情况下，正则表达式设置为 /ASSET{(.*?)}/g，但您可以轻松更新为匹配好的 ol' vanilla CSS url(...)s.再说一次，既然你有赏金，请告诉我你是否需要正则表达式的帮助 - 但我建议你尝试一下 b/c 你可能会学到一些简洁的东西(pssst，你想忽略 data: 网址).
Ideal solution: The cache busting plugin has an option for defining the regex to use to find assets. By default, the regex is set to /ASSET{(.*?)}/g, but you could easily update to something to match good ol' vanilla CSS url(...)s. Again, since you have a bounty let me know if you want help on the regex - but I suggest you take a stab at it b/c you might learn something neat (pssst, you want to ignore data: URLs).
在 cache bust 配置中试试这个正则表达式:/url((?!['"]?data:)['"]?([^'")]*)['"]?)/g
Try this regex in the cache bust config:
/url((?!['"]?data:)['"]?([^'")]*)['"]?)/g
如果您想忽略以http"开头的 URL(意味着它们托管在另一个域上)，请使用以下正则表达式.这假设您的资产的所有路径都是相对的，它们应该是:/url((?!['"]?(?:data|http):)['"]?([^'")]*)['"]?)/g
http://www.regexpal.com/?fam=94251
If you want to ignore URLs which start with "http" (meaning they're hosted on another domain), then use the following regex. This assumes that all paths to your assets are relative, which they should be:
/url((?!['"]?(?:data|http):)['"]?([^'")]*)['"]?)/g
http://www.regexpal.com/?fam=94251
如果您希望能够定义具有散列/破坏 URL 的 CSS 属性，您可以使用以下内容，该属性仅适用于 background、background- 中定义的 URLimage 和 list-style CSS 属性.您可以通过在 |list-style 之后添加管道 | 加上属性名称来添加更多内容:/(?:background(?:-image)?|list-style)[s]*:[^
;]*url((?!['"]?(?:data|http):)['"]?([^'")]*)/g
http://www.regexpal.com/?fam=94252
If you want to be able to define the CSS attributes which will have hashed/busted URLs, you can use the following, which will only apply to URLs defined in background, background-image, and list-style CSS attributes. You can add more by adding a pipe | plus the name of the attribute after |list-style:
/(?:background(?:-image)?|list-style)[s]*:[^
;]*url((?!['"]?(?:data|http):)['"]?([^'")]*)/g
http://www.regexpal.com/?fam=94252
这篇关于使用 Gulp 在我的 CSS 中缓存半身像背景图像而无需编辑我的 SASS?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
