いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon
131028 st2 compass watch 1

皆様こんにちは。とろあ( @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でビルドを実行。

131028 st2 compass watch 2

無事にCompassの監視が有効になりました;)

 

知識不足のため説明をふっ飛ばしている部分がありますが、中途半端な理解でお伝えすることは出来ないので今回はCompassの監視部分についてのみ解説しました。

シェルスクリプトとか、ST2とか、Compassとか、もっとしっかり勉強して色々ご紹介していければと思います。

 

SublimeText2ってなに?どういいの?という方は、ドットインストールで学んでみることをオススメします。

Sublime Text 2入門 (全14回) – プログラミングならドットインストール

インストール方法などは、当ブログでも紹介しています。

【Sublime Text 2】 Emmet/Sass/SCSS(Compass)を導入して、さくさくコーディングする準備をしよう!

当ブログが気になったら…是非RSSにご登録ください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です