缓存胸围背景图像在我的CSS与Gulp，而不必编辑我的SASS？ [英] Cache bust background images in my CSS with Gulp without having to edit my SASS?

问题描述

我想在我的CSS中缓存胸围背景图片。所以，如果我的原始风格是：

  .one {
 background：url（image.png）; 
 
 $ / code> 

可以添加一个字符串：

  .one {
 background：url（image.png？1234）; 
} 
  

或者可以更改文件名称：

  .one {
 background：url（image-1234.png）; 
} 
  

与其使用随机生成器或时间戳id来使用哈希值图像文件，以便只有在需要时才缓存高速缓存（文件实际发生更改时）。

我使用SASS和Gulp，因此我可以使用Gulp Cache Buster和Gulp Hasher：

https://github.com/disintegrator/gulp-hasher

https://github.com/disintegrator/gulp-cache-buster

我遇到的问题是它看起来像你需要修改你的SASS。因此，如果您以此开始：

  .logo {
 background：url（assets / images / logo.svg） ; 
} 
  

您需要将其更改为：

  .logo {
 background：url（ASSET {assets / images / logo.svg}）; 
} 
  

我想让我的SASS保持干净整洁，而不是以这种方式修改它。这可能吗？

解决方案

我看到它的方式有两种选择 - 两种都会使用您列出的hasher和缓存清除插件：

1. 编写一个可自动添加 ASSET {...} 围绕CSS文件中的所有URL。在串联和之前发生哈希/破坏之前会发生这种情况。既然你对这个问题有一个赏金，让我知道你是否希望我写这个任务。我建议你尝试一下，尽管你可能会学习一些整洁的东西。

理想的解决方案：缓存清除插件可以选择定义用于查找资产的正则表达式。默认情况下，正则表达式被设置为 / ASSET {（。*？）} / g ，但你可以很容易地更新到某些东西来匹配好的'香草CSS URL（...）秒。再说一次，既然你有一个奖励，让我知道你是否需要正则表达式的帮助 - 但我建议你试试它可能会学到一些整洁的东西（pssst，你想忽略 data： 网址）。



在缓存配置文件中尝试以下正则表达式：

/ url\（（？！[']？ data：）[']？（[^''\）] *）[']？\）/ g





如果您想忽略以http开头的URL（表示它们托管在另一个域中），请使用以下正则表达式。这假定资产的所有路径都是相对的，它们应该是：

/ url\（（！！[']？（?: data | http）： ）['']？（[^'\）] *）[']？\）/ g

http://www.regexpal.com/?fam=94251





如果您希望能够定义具有散列/破坏URL的CSS属性，可以使用以下内容，它仅适用于后台，<$中定义的URL c $ c> background-image 和 list-style CSS属性。在 | list-style 之后添加一个管道 | 以及属性名称可以添加更多内容：

/（?: background（？： - image）？| list-style）[\s] *：[^ \r\\\
;] * url\（（ ？！[']？（?: data | http）：）[']？（[^''\）] *）/ g

http://www.regexpal.com/?fam=94252

I want to cache bust background images in my CSS. So if my original style is:

.one {
  background: url(image.png);
}

A string can be added:

.one {
  background: url(image.png?1234);
}

Or the file name could be changed:

.one {
  background: url(image-1234.png);
}

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).

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

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

You need to change it to this:

.logo {
  background: url(ASSET{assets/images/logo.svg});
}

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:

1. 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.

2. 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).

   Try this regex in the cache bust config:
   /url\((?!['"]?data:)['"]?([^'"\)]*)['"]?\)/g

   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

   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]*:[^\r\n;]*url\((?!['"]?(?:data|http):)['"]?([^'"\)]*)/g
   http://www.regexpal.com/?fam=94252

这篇关于缓存胸围背景图像在我的CSS与Gulp，而不必编辑我的SASS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！