2013.10.28

SublimeText2でCompassのPackageデフォルト動作が compass watch じゃなくなった？

ブログ

皆様こんにちは。とろあ( @tohroa )です。

以前からSublimeText2(以下、ST2)にSass+CompassのPackageを導入して使用していました。

7月にブログデザインを更新したのを最後に、しばらくブログのソースを弄っていなかったのですが、またカスタマイズ欲が出てきたので久しぶりにHTML/CSSソースをいじることに。カスタマイズ欲ってなんでしょう。

どうやら7月以前にブログデザインを弄った時にはWindowsだったらしく、MacのST2にPackageが全部入っていませんでした。

SassとかCompassとか次々とインストールしていったのですが、確か以前はCSSファイル変更時にCompassが勝手にビルドしてくれていた気がするけど、ファイルの変更を監視してくれていない様子。

毎回毎回ビルドするのが面倒だったため、ちょっと調べて解決出来たのでシェアしたいと思います。

Compass Watch!!

Compassとの出会いがそもそもST2のPackageだったためCompassのコマンドとか理解していなかったのですが、どうやら「compass watch」というコマンドが実行されればファイルの監視を行ってくれるということがわかりました。

とりあえず、Package Control: List Packages→CompassでCompassのPackageが格納されているディレクトリを表示。

Compass.sublime-build の中身をみてみると以下内容が確認できました。

{
"cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'",
"working_dir": "$packages/Compass",
"selector": "source.sass, source.scss",
"shell": "true",
"windows":
{
"cmd": "build.cmd \"${file_path}\" \"${project_path:${folder}}\""
}
}

「これを見て何がわかるんだ？！」という方…大丈夫。ぼくにもさっぱりです。

「いやいやこのぐらい分かろうよ」という方、色々ご指導頂ければ幸いです。

貧しい頭をフル回転させて読み解いたところ、2行目でシェルスクリプトとして”build.sh”を呼び出しているようだ。ということを理解。(Windowsの場合、8行目で”build.cmd”を呼び出し)

ということで、次は同じディレクトリにある”build.sh”の中身を確認。

#!/bin/sh
if [ -z "$COMPASS" ]; then
echo "[ERROR] compass not found. Make sure it exists in your PATH.";
exit;
fi
if [ `find "$FILE_PATH" -maxdepth 1 -name config.rb` ]; then
$COMPASS compile "$FILE_PATH" --boring;
FOUND=1;
fi;
while [ "$FILE_PATH" != "$PROJECT_PATH" ];
do FILE_PATH=`dirname "$FILE_PATH"`;
if [ `find "$FILE_PATH" -maxdepth 1 -name config.rb` ]; then
$COMPASS compile "$FILE_PATH" --boring;
FOUND=1;
break;
fi;
done
if [ -z "$FOUND" ]; then
echo "[ERROR] Build did not run because config.rb cannot be found.";
fi

上記の様な内容だったのですが、if文内に[ERROR]が書かれているところはエラー処理だとして、それ以外を書き換えれば良さそう。

となるとそれっぽいのは、13行目と21行目。悲しいかなよく理解出来ていないので解説は無しで。

21行目はディレクトリのファイルを再帰的に処理しているように見えるのですが…。

「$COMPASS compile “$FILE_PATH” –boring;」の内容を、「$COMPASS watch “$FILE_PATH” –boring;」に変更しました。

そして、ST2でビルドを実行。