NetbeansでSass自動コンパイル

以前ブログで書いたのをQiitaに移してます。

Netbeansのバージョンは8.0でWindowsです。

前まではSassの自動コンパイルにGUIのKoala（コアラ）を使ってましたが、私は下請けでプログラムだけ依頼されたりする関係でサイトが２０サイト以上登録されてるので、コアラの左側がとんでもない事になってたり、そもそも立ち上げ忘れたりで面倒になってたので、Netbeansで自動コンパイルする方が楽だなと思いまして今回の話になりました。

まずはSassをインストールします。
単純にRubyをインストールしてgemでsassとcompassをインストールして下さい。
（ここは検索して下さい。何も問題なく出てきますので）

でここからNetbeansの設定
ツール→オプション→その他→CSSプリプロセッサ
Netbeans8.0だと先にRubyでsassをインストールすると勝手にパスが入ってるはずです。

こんな感じですね。（Sassパスの部分を設定してあります。）

ここまではNetbeans全体としての設定。

次にプロジェクトの設定をします。

ちょっと「プロジェクト」について
NetbeansをJavaとかのプログラム制作で使ってるような人は違和感なくわかると思いますがサイト制作ツールとして使ってる人のために一応書くと、プロジェクトは複数のサイトやプログラムを作る際の１つの単位だと思って下さい。
「A」と言うサイトには「A」（名前は自由につけられますが）というプロジェクトを作成します。
で別に「B」というサイトを立ち上げる事になったら「B」と言うプロジェクトを別で作って一つの塊として管理するんだと思ってもらえれば良いかなと思います。

結構一つのサイトしかやらない方が「プロジェクト」って言われて固まってるのを見た事があったので（笑

さて本題に戻ってプロジェクトの設定です。
左「プロジェクト」画面から、
プロジェクト名を右クリック→構成の設定→カスタマイズ
で「プロジェクト・プロパティ」の画面が立ち上がります。
で「CSSプリプロセッサ」を選択します。

そして「保存時にSassファイルをコンパイル」にチェックを入れます。
ほとんどの人はCompassを使うと思いますので下の「コンパイラ・オプション」に「--compass」を入力します。

これで準備は完了ですが、ここからを解説してる記事が意外と少ないので少し書いておきます。

「ウォッチ」の欄はウォッチ・・要するに監視するフォルダだと思えば良いかと。
入力に「/scss」が、出力に「/css」が入ってる場合は
「scssフォルダに入ってるscssファイルをコンパイルしてcssフォルダに出力」
って言う意味です。
で下の方に「Webサイトのルートへの相対ディレクトリURLを使用して下さい」って書いてあります。
私なんかがそうですが、レンタルサーバに合わせて（さくらのレンタルサーバが多いです）あるので、

こんな感じに「www」フォルダからプロジェクトに入ってます。
例えばwwwフォルダ外にpearをインストールとかcakeをインストールとかはよくある話だと思います。
（直接WEBからアクセスとかされない為ですね）

その時にこのままだと相対パスが違うのでコンパイルしてくれない訳です。

その場合は先ほどの「プロジェクトプロパティ」ウィンドウの左から「ソース」（一番上のはずです）を選択
「Webルート」に「www」を入れてやるとそのフォルダをWebルートとして認識してくれます。

ですので先ほどのフォルダ構成を認識してくれるようになりますよって言うお話です。

スクショでは設定済みなので「scss」フォルダの「main.scss」を入れて、編集してから保存すると自動でコンパイルして「css」フォルダに「main.css」としてコンパイルされているのがわかると思います。
この場合の「main.css.map」は自動生成され、おそらくscssファイルとcssファイルとの対応が書かれていて、Chrome等でCSSをデバッグ？する際にscssファイルのどこに記述があるとかを表示してくれます。

参考になる人がいれば幸いですし、こうする方が良いよとか突っ込んでもらえるとありがたいです。