HTML5 × CSS3 × jQueryを真面目に勉強 – #5 LESSのコンパイル（Win / Mac）
そんな訳で、CSSの拡張メタ言語であるLESSをCSSにコンパイルする手順を学んでおくとします。
前回、LESSとはなんぞやという記事を書きました。今回はそれの補足に当たる内容なので、LESSをまだご存じないという方は、こちらに目を通されておくのがよろしいかと思いますが、「そんなのめんどくせー、息をするのもめんどくせー」という横着なアナタのために簡単に説明しておきます。
LESSとはCSSに対する拡張メタ言語のことです。拡張メタ言語とは、元の言語と同じ意味（機能）をより少ないコードで表現できるようにしたもので、「あー、CSSダラダラ書くの超めんどくせー、息をするのもめんどくせー」という横着なアナタにピッタリの言語というわけです。詳しくはこちらをご覧ください。
LESSからCSSファイルを書き出す (Win)
lessc.exe
まずはコマンドラインツールによる手法からやっていきます。以下のサイトからlessc.zipをダウンロードして解凍し、適当なディレクトリに配置します。
http://digitalpbk.com/less-css/less-css-compiler-windows-lesscexe
PATHを通すとか、そういったややこしい話はナシにして、今回はC:\bin\lessc.exeに置くことにしました。
配置できたら、スタートメニュー > 「プログラムとファイルの検索」にcmdと入力してcmd.exe（コマンドプロンプト）を起動します。
基本構文
lessc.exe [-switches] inputfile [outputfile]
項目は上記の3つだけになります。switchesとoutputfileはオプションで、必須なのはinputfileだけであり、ここにLESSファイルを指定します。とりあえずコンパイルしてみるとすると、
lessc.exe ..\less\style.less
と入力してEnter。
C:\bin>lessc.exe ..\less\style.less [Compile] C:\less\login.less -> C:\less\style.css [Done]
こんな感じの結果になりましたでしょうか。style.cssがLESSファイルと同じフォルダ内に書き出されたかと思います。
outputfile
outputfileを指定すると、CSSファイルの出力先を指定することが出来ます。
C:\LESS_SAMPLES
├─ css
│
└─ less
├─ common.less
└─ style.less
ディレクトリ構造はこんな感じとします。
lessc.exe ..\less\style.less ..\css\
と入力してEnter。
C:\bin>lessc.exe ..\less\style.less ..\css\ [Compile] C:\less\style.less -> C:\css\style.css [Done]
今度はstyle.cssが、指定したcssフォルダ内に書き出されたかと思います。ちなみに、
lessc.exe ..\less\*.less ..\css\
てな感じでlessファイル名の変わりに*.lessとすると、指定したディレクトリ内にある全てのLESSファイルがCSSファイルとして書き出されます。
C:\LESS_SAMPLES
├─ css
│ ├─ common.css
│ └─ style.css
│
└─ less
├─ common.less
└─ style.less
-switches
コマンド実行時のオプションを指定します。オプションは3種類あります。
- -m(––minify)
- LESSファイル内のコメントや改行、インデントなどが全て削除された状態で書き出されます。
- -w(––watch)
- 元のLESSファイルを編集すると、その結果が書き出されたCSSファイルに自動的に反映されます。
- -h(––help)
- lessc.exeのヘルプ（使い方）が黒い画面に表示されます。この時はCSSファイルは書き出されません。
lessc.exe -w ..\less\*.less ..\css\
-wを指定してCSSファイルを書き出すと、lexxc.exeが起動している間は元のLESSファイルを監視し、編集されると自動的に再コンパイルが実行されます。コマンドプロンプト上でEnterキーを押すことで監視は停止します。
Eclipse上でLESSをコンパイルしたい (Win)
前回の記事にて、Eclipse上でLESSを効率良く開発するためにEclipse plugin for LESSをインストールしましたしたが、当記事執筆時点ではプラグイン単体でCSSファイルを書き出す機能というのがまだ備わっていないようです。仕方ないので少々泥臭いですが、先ほどのlessc.exeを利用してEclipse上でコンパイルできる仕組みを作るとします。
Step.1 lessc.exeをEclipseのワークスペース内に配置する
なるべく分かりやすくするために、こんな感じのディレクトリ構造にします。
{ワークスペース}
├─ bin
│ └─ lessc.exe
│
└─ {プロジェクトフォルダ}
│
├─ bin
│ └─ bake.less.cmd
│
├─ css
│
└─ less
├─ common.less
└─ style.less
Step.2 lessc.exeを実行する起動バッチを作る(.cmd)
プロジェクト > bin フォルダにbake.less.cmdファイルを作成します。
※とりあえず空っぽのtxtファイルを新規作成して、ファイル名と拡張子を書き換えておけばOKです。中のコードは後で書くとします。
Step.3 Eclipseのビルダーを設定
lessフォルダ内のLESSファイルを編集したら、自動的にコマンドが起動しCSSファイルを書き出すという仕組みを作ります。
プロジェクトを右クリックしてプロパティを表示します。
左の一覧からビルダー選択し、新規ボタンをクリックします。
構成タイプの選択ウィンドウでプログラムを選択します。
こんなウィンドウが出てくるので適当な名前をつけたら、ロケーションを指定します。ワークスペースの参照から行くのがよいでしょう。
プロジェクト内の起動バッチファイルを選択します。
作業ディレクトリーを指定します。プロジェクトフォルダを指定します。
このように出来たら、続けてリフレッシュタブをクリックします。
ここではファイルの書き出し先のリフレッシュについて設定します。完了時にリソースをリフレッシュにチェックをつけ、特定のリソースを選択して、リソースの指定ボタンをクリックします。
CSSファイルの書き出し先を指定します。
ビルドオプションタブを選択し、このようにチェックをつけたら、リソースの指定ボタンをクリックします。
ビルド対象となるlessフォルダを選択してOKをクリックします。
構成の編集ウィンドウを閉じて、このような状態になっていればOKです。
Eclipseメニューのプロジェクトから自動的にビルドにチェックを入れておきます。
Step.4 bake.less.cmd にコマンドを記述
とりあえずlessc.exeをコマンドプロンプトから実行した際の動作をそのまま再現してもらえれば良しとしますので、以下の1行だけ書きます。
start {ワークスペースの絶対パス}\bin\lessc.exe ..\less_sample\less\*.less ..\less_sample\css\*.css
簡単に補足しておきますと、startコマンドでワークスペース以下に配置したlessc.exeを実行します。lessc.exeは絶対パスで指定します。あとは、lessc.exeを実行するのに必要なパラメータを指定します。この辺は先ほどすでに紹介しました。Minified版で書き出したい場合は、-mをlessc.exeの後ろに記述すればOKですね。
これでようやく準備は完了です。あとはEclipse上でLESSファイルを編集して保存すると、そのタイミングでlessc.exeが起動してlessフォルダ内にあるLESSファイルが全てCSSファイルに書き出されます。
{ワークスペース}
├─ bin
│ └─ lessc.exe
│
└─ {プロジェクトフォルダ}
│
├─ bin
│ └─ bake.less.cmd
│
├─ css
│ ├─ common.css
│ └─ style.css
│
└─ less
├─ common.less
└─ style.less
MacでもEclipse上で編集したLESSファイルを効率的にCSSファイルに書き出せないか
上記の手法はWindows限定なので、Macな人たちは他の手段を考える必要があります。色々と探してみたものの出来そうなのが見つけられなかった為、とりあえず現時点で私が使っている手法を紹介いたします。と言ってもWindowsの手法と比べたら呆れるほど単純だったりします。
Less.app
LESSのパーサーエンジンであるless.jsが搭載されたGUIツールです。ファイル単位もしくはフォルダ単位でLESSファイルを認識し、更新されたタイミングで任意のディレクトリにCSSファイルを自動で書き出してくれます。
以下の公式サイトからダウンロードできます。
ダウンロードしたZipファイルを解凍してアプリケーションを起動すると、このような画面が出てきます。
ここにコンパイルさせたいLESSファイルやフォルダをドラッグ＆ドロップして認識させ、その後でLESSファイルを更新するとCSSファイルが書き出されます。
フォルダ単位で認識させた場合は、フォルダ内にある全てのLESSファイルが一斉にコンパイルされます。
Automatically comile files when savedオプションにチェックをつけると、LESSファイルの更新を検知してCSSファイルが自動で書き出されます。
こちらの設定メニューからCSSファイルの出力先を指定します。
ここでEclipseプロジェクト内のCSSフォルダを指定します。
これにて準備はできました。この状態でEclipseにてLESSファイルを更新すると、Less.appがそれを検知して、指定のフォルダにCSSファイルを書き出してくれます。
{ワークスペース}
│
└─ {プロジェクトフォルダ}
│
├─ css
│ ├─ common.css
│ └─ style.css
│
└─ less
├─ common.less
└─ style.less
このようになっていれば成功です。
おわりに
手段はどうあれ、Eclipse上でLESSファイルを編集しながら自動でCSSファイルを書き出す環境を作ることが出来ました。Windows版およびMac版のどちらも、導入にやや手間がかかるのと、Eclipse単体で完結せずに外部アプリケーションを併用するなど付け焼刃な感じが否めませんが、一応コーディングはLESSで行い、動作確認はCSSで行うといった環境が出来たのではないかと思います。どなたか「もっと簡単で上手い方法を知っているぜ」という方がいましたら、ぜひともご教示いただければ幸いです。
![[登壇資料]DevelopersIO 2024 TOKYOで「Notion × Wraptasサイト作成ハンズオン」を行いました #devio2024](https://images.ctfassets.net/ct0aopd36mqt/15fBmQfuSigujXU7gsvbcB/b38e8dcb0f6d4cc53a85bbf4554ecdbe/devio2024_tokyo_w1200h630.png)
