2013/08/22

[compass] cssスプライト画像のファイル名をシンプルにする

compassでcssスプライト画像を作ると、ファイル名が「sprite-918734128374.png」って感じになる。
しかもsass内のこのスプライト箇所が更新されると、ファイル名も変わる。
これは名前を変えないと各ブラウザにキャッシュされている古い状態の画像が出てしまうことへの対策だと思うんだけど、運営していく上ではちょっと面倒…。

・cssファイルだけでなく画像ファイルもアップしないといけない
・サーバ上の古い画像を削除しないといけない

…書いてみると、それくらい面倒臭がらずにやれやって感じもするが…面倒くさがりなのは、ある種の美徳らしいのでいいことなはず。

他には
・compass以外で画像もcssも変更しづらくなる
ってのもあるけど、これはできればcompass以外で作業しないといけない状況になること自体を避けた方が良さそう。

で、ファイル名をシンプルに「sprite.png」とかにする方法
config.rbに下記を追加する
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end
参考:How to turn off COMPASS SASS cache busting?

0 件のコメント:

コメントを投稿