[compasscss] cssスプライトのファイル名をシンプルにした場合のキャッシュ対策

compassのcssスプライト作成時にファイル名につく乱数を削除して、シンプルな名前にすることができる。

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

これだとファイルがキャッシュされて、ファイルを変更しても古い画像が表示されてしまう可能性がある。

その場合は下記のコードをconfig.rbに追加。

「**.css?Owoiu93k2djhr」という風にファイル名の後ろに乱数をつけてキャッシュを読み込まないように対策できる。

on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
     rand = rand(100000000)
     str = '.png?' + rand.to_s
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, str)
    end
  end
end
# ----------------------------------------

preprosでJavaScriptを連結させる

最近preprosを使ってます。
windows版codekitなんて呼ばれてるらしいす。
自分はmacなんですが、無料なんでcodekitじゃなくてこっちを使ってます。
いろいろ便利なツールを世界中の人々が開発してくれていて、とてもありがたや

複数のJavaScriptファイルを連結させて1つのファイルにしたかった。
日本語で紹介してるブログなんかを読むと、「JSの連結・圧縮もできます（やったね！）」みたいなこと書いてるんですが、実際のやり方書いてるとこは見つからんかったです

公式サイト見たらもちろん書いてました。

//jsファイルに↓こう書くと…
//@prepros-append first.js
//first.jsの中身がここに書かれる。頭のスラッシュ2つも必要です。

//↓prependもある。↑上のappendよりも先に記述される
//@prepros-prepend second.js

指定した箇所に、ファイルの中身が圧縮された状態で追加されるので、他の箇所には普通に処理を書いたりもできます。

$(function(){
 console.log('uoooooooOOOOOOUU!!!!!!');
 //@prepros-append second.js
 console.log('GYAAAAAAAaaaaaaaaa…….');
})

codekitのも使えるよ、とのこと。
//@codekit-prepend ***.js
//@codekit-append ***.js


デフォルトではjs/min/にファイルを書き出すようです。 参考：公式サイトJS連結に関するページ

[compass]rgbaが使えない古いブラウザ向けにも対応できるcompassのプラグイン

バージョン8以前のIEはcssでrgbaが使えない。
いちいち画像作るのも面倒だったので、探してみたら、IE8以前向けに、自動で画像を作ってcssもつけてくれるプラグインを見つけた。

参考：https://github.com/aaronrussell/compass-rgbapng

■インストールが必要
gem install compass-rgbapng

■config.rbに下記を追加
require "rgbapng"

■cssファイルに下記を追加
@import "rgbapng";

■変数の設定
$rgbapng_path: 'my_pngs';　//自動で作ってくれる画像を格納するフォルダ名
$rgbapng_px_size: 8; //作成する画像のサイズ

■新しく追加されたMIXINを使うと動作する
rgba-background($color, [$path, $pixel]);

これが
@include rgba-background(rgba(0,0,0,0.75));

こうなる
background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);


IE6には対応していないようで、もしIE6を使いたいなら‥
・DD_BelatePNGを使う
・自分でIE独自フィルターを使ったMIXINを作る
・Universal styesheetを使う
のどれかを選んだらと言ってくれてます。

[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?

compass使ってたらsingle-transitionでエラーになった

Undefined mixin single-transitionとかなんとか、そんなエラー。
結論だけかくと、バージョンアップしたら治った。

調べてたら、「2つ同時にcompass watchしてたせいだったっぽいよ」って言ってた人もいたので、そういう場合もあるのかも。