開発環境と本番環境とがcompassでも切り替えられるらしい。
grunt使えばjsもまとめてできるしそっちのほうがいいじゃん、って話ではあるんですが、こちらはこちらで何かと便利かと思ったので使ってみました。
次のようなconfig.rbを用意してやります。
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = (environment == :production)? "assets/img": "img"
javascripts_dir = "js"
output_style = (environment == :production)? :compressed: :nested
relative_assets = (environment == :production)? false: true
line_comments = (environment == :production)? false: true
それぞれのプロパティについての説明については割愛するとして、ポイントは三項演算子をつかってるプロパティの評価文。
compassのconfigではenvironmentというプロパティが用意されていて、このプロパティは:developmentと:productionの、いずれかのtypeを持つことができます。
それで、上記のconfig.rbでは何をしているか。
プロパティenvironmentに:productionが指定されていた場合には三項演算子の二項目の値を、そうでない（つまりデフォルト値の:development）であれば三項目に指定された値を使うようにしているわけです。
さて、config.rbがかけた所で、じゃあ実際にどうやって環境を切り替えるか。
まず開発環境についてですが、こちらはデフォルトで指定されていますので特に指定などはせずに、
compass compile
もしくは
compass watch
してやればよいでしょう。
次に本番環境に切り替えてみます。
これもとてもかんたんで、コンパイル時にいつものコマンドの代わりに次のコマンドを叩けばおーけーです。
compass compile -e production --force
-e productionで環境を設定している感じですね。
ここで--forceとしたのは、scssファイルが書き換えられていない場合には環境を切り替えたとしてもコンパイルが実行されないからです。
なので確実にコンパイルするために--forceしてあげる、という感じですね。
僕はわざわざこれうつのが面倒なのでalias設定してcprodみたいな感じにしてやってます。
最後に参考までに、実際にこれをつかってコンパイル実行するとどうなるか載せてみました。
@import "compass";
.hoge {
background: image-url('hoge.png');
}
このしょっぼいscssをコンパイルすると、
:development
/* line 3, ../sass/hoge.scss */
.hoge {
background: url('../img/hoge.png'); }
:production
.hoge{background:url('/assets/img/hoge.png')}
という感じになります。
これだけだと有り難みがあんまり感じられない気もしますが、規模が大きくなってきたらそこそこ便利に使えるかも・・・しれない。