Win8+Eclipse+LESS

LESSをEclipseで利用できるようにするまでの手順を忘れないように。


１．LESSプラグインを利用するにはXtextプラグインが必要なのでまずXtextプラグインを追加する。

　　ヘルプ ＞ 新規ソフトウェアのインストールを選択し、表示されたダイアログの追加ボタンを押下する。
　　名前に自由な名前（ここではXtextとした）を設定し、
　　ロケーションに「http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/」を設定する。
　　設定すると以下のようにいっぱい一覧に表示される・・・。

　　ただ必要なのは、Xtextだけなので、最新版だけチェックを入れて完了ボタンを押下する。
　　以降は他のプラグイン同様にどんどん進めていけばインストールが完了する。

---

２．LESSプラグインをインストールする。

　　ヘルプ ＞ 新規ソフトウェアのインストールを選択し、表示されたダイアログの追加ボタンを押下する。
　　名前に自由な名前（ここではLESSとした）を設定し、
　　ロケーションに「http://www.normalesup.org/~simonet/soft/ow/update/」を設定する。
　　今度は1個しか出てこない！素敵！

後はデフォルトのままどんどん進めていけば完了。
インストール完了後にEclipseの再起動をすれば利用できるはず。

---

---

３．コンパイルできるようにする。（準備１）

　　本来のやり方ではありません・・・。ほんとはlessファイルを右クリック＞実行＞LESS Compilerで実行したかったけど。。。
　　全然動かない（つか調べてない。。。）ので、外部ファイルを実行する形で良いかなと。

　　とりあえず必要なファイルを一式そろえる。
　　１）node.jsからWin用のexeファイルをダウンロード

　　２）less.js一式ダウンロード

後は以下のディレクトリ構成にする。

xxx/
├─ lessc.bat
├─ bin/
│   ├── lessc
│   └── node.exe
├─ lib/
　   └── less/
　       ├─ tree/
　       ├─ browser.js
　       ├─ colors.js
　       　　　...

この状態で適当なディレクトリにおいておく。
今回は上記xxxをC:\workとする。

上記のlessc.batを作成する。

@"%~dp0\bin\node.exe" "%~dp0\bin\lessc" %*

---

４．コンパイルするためのEclipseの設定（準備２）

　外部ツール構成を開いて、新規作成する。

１：ロケーションには、上記で作成したバッチファイルを指定する。
２：作業ディレクトリはworkspace内の適当なディレクトリを指定する。
　　LESSファイル保存ディレクトリを指定すれば引数が短くて楽。
３：引数は、LESSファイル名[半角スペース]CSSファイル名
　　これを実行すれば同じディレクトリにCSSができる！
　　完璧！

---

---