使用 Compass 对资产进行硬缓存破坏答案

【问题标题】：Hard cache busting of assets w/ Compass使用 Compass 对资产进行硬缓存破坏
【发布时间】：2013-08-13 08:57:31
【问题描述】：

我想使用 Compass 进行硬缓存破坏，即拥有带哈希后缀的资产。

Compass 目前正在通过在查询字符串中添加 ?v 参数来使用软缓存破坏，但这显然不是每个 cdn 服务都支持的，所以我想避免这种情况并直接在文件名中编码文件哈希(myfile-2q7de.png)。

有可能吗？我目前的方法是复制我所有的资产，将它们全部散列，然后编写一个映射文件并在最小的 Sass 扩展中使用它，以从它的非散列路径中获取真实的文件路径。它工作得很好，除了 spritesheets ：它使 Compass 将哈希添加到 sprite 类名称中，这使得它们无法使用：

.sprite-myfile-2q7de {
    ...
}

我应该补充一点，我正在使用 Grunt 来完成所有这些工作。

【问题讨论】：

标签： compass-sass gruntjs

【解决方案1】：

Compass 已经在生成的精灵表中添加了一个哈希作为缓存破坏器（例如icons-sf6a3361a01.png）。

对于其他图片，您可以在config.rb 中使用以下代码，该代码位于documentation：

asset_cache_buster do |path, real_path|
  if File.exists?(real_path)
    pathname = Pathname.new(path)
    modified_time = File.mtime(real_path).strftime("%s")
    new_path = "%s/%s-%s%s" % [pathname.dirname, pathname.basename(pathname.extname), modified_time, pathname.extname]

    {:path => new_path, :query => nil}
  end
end

因此，SCSS 代码

.icon-cloud {
  background: image-url("weather-cloud.png") no-repeat 0 0;
}

使用嵌入式缓存破坏器 (weather-cloud-1365271586.png) 生成图像：

.icon-cloud {
  background: url('../img/weather-cloud-1365271586.png') no-repeat 0 0;
}

警告：指南针不会复制或重命名图像。您必须创建一个重写规则，以允许您的网络服务器提供良好的图像。

【讨论】：