LESSコンパイラをNetBeansから使えるようにしてみる

開発環境が整ってきたところで、LESSのコンパイラも用意していきましょう。今回はLESSコンパイラのインストールとNetBeansで使えるように設定をしていきます。今回も手順通りに進めていけば問題なく完了するので、順々にやっていきましょう。

Node.jsのインストール

まずは、こちらからNode.jsのインストーラーをダウンロードします。今回はWindows Installer(.msi)を利用します。インストーラーのBitは手持ちのOSに合わせて選択して下さい。ダウンロード完了後、ダウンロードしたインストーラーを実行します。インストールは規約に承諾して、「Next」「Next」「Install」でOKです。

LESSコンパイラのインストール

コマンドプロンプトを開いて、以下のコマンド(一例)を入力してNode.jsをインストールしたフォルダに移動します。

cd c:\Program Files\nodejs

移動したら続いて以下のコマンドを入力してLESSコンパイラをインストールします。

npm install -g less

NetBeansの設定

続いてNetBeansでLESSコンパイラが使えるように設定していきます。何はともあれ、まずはNetBeansを起動します。 起動したら、メニューバーから「ツール」→「オプション」と選択し、オプションウィンドウを表示します。表示したら「その他」→「CSSプリプロセッサ」を選択します。LESSパスの参照ボタンを押下して、「C:\Users\[your name]\AppData\Roaming\npm\lessc.cmd」を選択し、適用ボタン、OKボタンを押下します。

動作確認

適当な名前のプロジェクトを作成し、プロジェクトのプロパティを表示します。プロパティウィンドウから「CSSプリプロセッサ」→「LESS」を選択します。ここでLESSファイルのコンパイル設定を行います。設定は各プロジェクト毎に行うことになります。今回は動作確認なので、「保存時にLESSファイルをコンパイル」にチェックを入れて、「入力」「出力」の両方を「/」に設定し、OKボタンを押下します。コンパイラオプションについては後日書くかもしれません。

ここまで設定したら、一度NetBeansを再起動します。再起動し忘れるとLESSコンパイルが失敗します。

再起動後、プロジェクトにLESSファイルを新規作成します。ファイル名はデフォルトのままでも、何でも構いません。作成したら以下の内容を記述します。

@color: #999999;
body {
    background-color: @color;
}

記述したら保存しましょう。保存と同時に同じ階層にcssファイルができますね。これが「保存時にLESSファイルをコンパイル」 ってことになります。

これでLESSを利用した開発が可能になります。CSSはもう見辛くて冗長で…と思っている方、LESSの導入は簡単ですよ!今更ですけど簡単ですよ!
それでは、楽しいPHP・WordPressライフを:)

よろしければSNSでシェアしてください!

コメントを残す

*
*