2013/08/22

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

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

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

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

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

で、ファイル名をシンプルに「sprite.png」とかにする方法
config.rbに下記を追加する
  1. on_sprite_saved do |filename|  
  2.   if File.exists?(filename)  
  3.     FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')  
  4.   end  
  5. end  
  6.   
  7. on_stylesheet_saved do |filename|  
  8.   if File.exists?(filename)  
  9.     css = File.read filename  
  10.     File.open(filename, 'w+'do |f|  
  11.       f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')  
  12.     end  
  13.   end  
  14. end  
参考:How to turn off COMPASS SASS cache busting?

0 件のコメント:

コメントを投稿