HOME > 情報備忘録 > [CSS]WindowsでLESS更新時に自動でコンパイルする設定方法

[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法

Windowsで.lessファイル更新と同時にコンパイルしてCSSを書き出す方法を2つほど。 簡単に開発環境を構築するためUbuntu入れたのに、Windowsの方が簡単だったりするから困るw

lessc.exe

GUIもいいけど、コマンドラインツールがあると他のツールからも使えたりするので、何かと便利ですよね。 設定もすごく簡単なので下記ページからlessc.zipをダウンロードして解凍後、lessc.exeを適当な場所に設置します。

ダウンロードサイト

PATHが通ってる場所が楽だと思いますが、ここではX:\bin\lessc.exeに置くことにします。 設置したら「winボタン+R」を押してcmdと入力してコマンドプロンプトを立ち上げます。

基本構文

CMD
  1.  lessc.exe [-switches] inputfile [outputfile]

[-switches][outputfile]はオプションなので必要なのはinputfileだけです。inputfileには.lessファイルを指定します。 単純にコンパイルする場合は、

CMD
  1.  X:\bin\lessc.exe .\hoge.less

とすればOKです。hoge.lessと同じ場所にhoge.cssが作成されます。

outputfile

outputfileを指定することで、cssの出力場所を変更することができます。

フォルダ構成
  1.  LESS\
  2.   less\
  3.   hoge.less
  4.   hoge2.less
  5.   css\

例えば上記のようなフォルダ構造においてカレントフォルダがLESS\の場合、

フォルダ構成
  1.  X:\bin\lessc.exe .\less\*.less .\css\*.css

とすると、css以下にhoge.csshoge2.cssが作成されます。

実行結果
  1.  LESS\
  2.   less\
  3.   hoge.less
  4.   hoge2.less
  5.   css\
  6.   hoge.css
  7.   hoge2.css

-switches

switchesで指定できるのは-m(--minify)-h(--help)-w(--watch)です。-mを指定するとコメントとか空白とか削除してくれます。-hはヘルプが表示されます。

そして、すこぶる便利なのが更新時に自動でコンパイルしてくれる-wオプションです。 例えば先ほどと同じく

フォルダ構成
  1.  LESS\
  2.   less\
  3.   hoge.less
  4.   hoge2.less
  5.   css\

の状態の時

CMD
  1.  X:\bin\lessc.exe -w .\less\*.less .\css\*.css

とすると、LESS\less以下の.lessファイルを編集したり.lessファイルを追加したりすると自動で、LESS\css\以下にcssファイルを出力してくれます。

正直これが一番簡単で楽ですが、コマンドプロンプトのウインドウを占拠してしまうので(バックグラウンドジョブ化が上手くいかない)ので Eclipseでlessファイル保存と同時にコンパイルする方法も紹介します。

Eclipse

Eclipseでのコンパイルでも上記のlessc.exeを利用しますのでダウンロードしておきましょう。 フォルダ構造は下記のようにします。Xドライブ直下にbin\とLESS\フォルダがあるという感じです。

とりあえず空でよいのでbin\bake.less.cmdを作成しておきます。

フォルダ構成
  1.  X:\
  2.   bin\
  3.   lessc.exe
  4.  
  5.   LESS\
  6.   bin\
  7.   bake.less.cmd
  8.   less\
  9.   hoge.less
  10.   hoge2.less
  11.   css\

EclipseのプロジェクトはLESS\以下に設定します。

ビルダー

less\以下を変更した場合に自動でcss\にcssファイルを書きだせるようにします。 まずはプロジェクトを右クリックしてプロジェクトのプロパティを表示させます。

「ビルダー」という項目を選択して「新規」をクリックします。 「構成タイプの選択」というウインドウが表示されるので

「プログラム」を選択します。「構成の選択」というウインドウが表示されます。

ロケーションでbake.less.cmdを選択します。ワークスペース参照でもファイルシステム参照でもどちらでも問題ありません。 ファイル保存時に、ここで選択したbake.less.cmdが実行されます。

作業ディレクトリをLESSプロジェクト内のどこかに設定します。

ここのパスは結構重要で、ここで設定したパスがbake.less.cmd実行時のカレントフォルダとなるみたいです。 なので、仮にbake.less.cmdの内容が相対パスなどを利用していろいろやってる場合、ここのパス設定を間違うと上手く動かないことがあります。

ここではbake.less.cmdの内容は絶対パスで記述するのでどこでもよいですが、これを応用する場合などご注意ください。

上記設定が済んだら次は「リフレッシュ」タブに移動します。 ちなみに楽天イーグルスの1軍選手が2軍降格になることを「利府レッシュ」と呼びます。 是非とも覚えておきたい用語ですね。

「完了時にリソースをリフレッシュ」にチェックを入れて「特定のリソース」をチェックします。右の「リソースの指定」ボタンを押してCSSを書き出すフォルダを選択します。

Eclipseを利用している方なら分かるかと思いますが、Eclipse以外からプロジェクト内に新しくファイルを作ったり、ファイル編集したりすると 「ファイル・システムと同期がとれていません」的なのが出てうっとおしいのでCSSの書き出しが完了したらCSSディレクトリを更新するという設定になります。

設定が完了したら「ビルド・オプション」タブに移ります。

とりあえず上記画像のようにチェックを入れます。 「リソース指定」からlessファイルのあるフォルダを選択します。

「コンソールに割り当て」は全て設定完了後、正常に動作してるのが確認できたらチェックを外しましょう。

ここで指定したフォルダ以下をビルドした時に最初のロケーションで指定したbake.less.cmdが実行されます。 なのでツールバー > プロジェクト > 自動的にビルドにチェックを入れておきましょう。 保存時にファイルをビルドしてくれます。

この設定でless\のファイルを変更してみましょう。コンソールビューが出てきたら less\以下のファイルをビルドしたらbake.less.cmdを実行するという設定が完了となります。

bake.less.cmd

ちょっと問題のbake.less.cmdです。成功したものは下記となります。

bake.less.cmd
  1.  start X:\bin\lessc.exe X:\LESS\less\*.less X:\LESS\css\*.css

start コマンドを使ってるせいか、inputfileoutputfileは絶対パスで設定しなくてはなりませんでした。 本当は最初にロケーションと一緒に設定した作業ディレクトリ基準で

bake.less.cmd
  1.  X:\bin\lessc.exe .\less\*.less .\css\*.css

という風に書きたかったのですが、これだとEclipseがビルド中に移譲起動中から抜け出せなくなるのでダメでした。 Eclipseに実行させる.bat.cmdはコマンドプロンプトから実行するような書き方ではダメみたいです。 外部コマンドを呼び出すとダメなのだろうか?いまいち謎です。

ちなみにLESS軽く使ってみましたけど、これ一度使った人はもう戻れないでしょうね楽すぎてw今後CSS書けるってことはSass(LESS)書けるってことだよね?くらいにサイト制作者の必須のスキルになっていきそうな気がしますね。

投稿日 2012年3月28日 05:20
カテゴリ 設定 | 開発環境
タグ CSS | Eclipse | LESS | Windows
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1292

関連ページ(5)

WEBプログラム覚書2012年4月 4日 04:39

[CakePHP2.0.x]FormHelper::input()の出力メモ

FormHelper::input()の出力がどのくらい変更できるかのテスト。

情報備忘録2012年5月19日 01:56

[LESS]lessc.exeでエラー

lessc.exeでエラー

WEBプログラム覚書2012年5月25日 13:29

[CSS][LESS] リンクの色を簡単に設定するmixin

リンクの色を簡単に設定するLESSのmixin。compassからパクリ。

情報備忘録2012年6月19日 11:11

[LESS][CSS][Windows]lessc.exeでエスケープ構文のエラーと対処法

lessc.exeでエスケープ構文が通らないのでbootstrapとか使う場合は、less.jsを使うといいよ。

WEBプログラム覚書2013年8月 2日 03:42

[LESS]!important キーワード

LESSの!importantキーワードについて適当に。

コメント

コメントする
Name
Email Address
URL