NetBeans7.4(Windows)でlessコンパイルの設定をする

NetBeans タイトル

個人的にすごく待ち望んでいたNetBeansのLESSのサポート
7.4になりようやっと標準サポートされました!ヽ(`▽´)/

使用方法をメモしてみます。環境はWindows7、NetBeans7.4です。

Windows コマンドライン用Lessをインストール

LESSコンパイラを用意します。今回はコマンドライン型のほうが使いやすいです。

GitHub - duncansmart/less.js-windows: A way to run the LESS.js compiler in windows
A way to run the LESS.js compiler in windows. Contribute to duncansmart/less.js-...

からZipでlesscをダウンロード。

展開

先ほどのzipを展開し、c:\のルートあたりに入れておきます。(好みで)

image

 

NetBeansに設定

NetBeansに戻り、ツール > オプション > その他 > CSSプリプロセッサ を開きます。

LESSパスの欄に lessc.cmd のフルパスを入力し、OKします。

NetBeans LESSの設定

 

プロジェクトで設定

次にプロジェクトにLessのコンパイル条件を入れます。

プロジェクトを右クリックし、プロパティ > CSSプリプロセッサ を開きます。

image.pngNetBeans LESSの設定 プロジェクト

 

保存時にLESSファイルをコンパイル にチェックを入れます。

つぎにどのディレクトリを監視するか条件を入れます。
ウォッチの欄にディレクトリを入れます。「入力」にlessをまとめたディレクトリ、「出力」にcssのディレクトリを入れます。

ちなみにコンパイラオプションに「-x」などを入れておけば、コンパイル時に圧縮もしてくれます!

 

これでLESSを作り保存すれば一瞬でCSSに!素晴らしすぎる!

LESSファイル編集中はプロパティ名の補完などもしっかりと効きます

LESSの表示 image.png

 

WTS的まとめ

NetBeansすばらしい!

開発者さん本当にありがとう!