LESS CSS Maven Pluginでプロジェクトのビルド時にLESSのコンパイルをする。

CSSを書いたことがある人は、CSSが同じような記述を何度も繰り返さなければいけないことにうんざりした経験があるんじゃないでしょうか。

広告

CSSの記述を楽にするCSSメタ言語LESS

「CSSで変数や関数が使えたらいいのに・・・」という願望を満たすべく生まれたのがCSSメタ言語というもので、有名なものにSassLESSがあります。
シロクでは、少し検討した結果LESSを選択し、もう1年くらいの付き合いになります。

(実際にCSSを書いているのは僕ではないのですが。)

Maven JaveプロジェクトでLESSを使う

以前はPHPでプログラムを書くことが多かったので、ちょっとしたプログラムを仕込んで、LESSを変更するたびにlessコンパイラを走らせてcssを出力させていました。
最近は、PHPではなくJavaでプログラムを書くことが多いです。Javaではコンパイルが必要なので、単純にコンパイルのフェーズで、LESSもコンパイルするのが良さそうです。
Mavenのプラグインがないかと探してみると、「Official LESS CSS Maven Plugin」が見つかりました。

プラグインの導入

さっそく「LESS を Maven プラグインでコンパイル – lesscss-maven-plugin を使ってみる」を参考に入れてみました。
参考にしたページでは、一度自動生成ファイル用のディレクトリにコンパイル済みCSSを保存し、それをwarパッケージに含めるという方法をとっています。ちょっとかっこいいです。
今回は、単にlessディレクトリと同階層に置かれたcssディレクトリに同名で出力することにします。


	org.lesscss
	lesscss-maven-plugin
	1.3.3
	
		
			${project.basedir}/src/main/webapp/less
		
		
			${project.basedir}/src/main/webapp/css
		
		true
		UTF-8
		
			*.less
		
	
	
		
			
				compile
			
		
	

compressオプションをtrueにしておくと、CSS出力時にホワイトスペースなどを除去してくれます。encodingオプションで出力エンコーディングは指定できますが、入力エンコーディングが指定できず、LESSの日本語が文字化けしてしまうのが悩みどころです・・・。
しかしながら、これでMavenのcompileフェーズで、cssディレクトリに同名のファイルがコンパイルされ出力されます。裏でどういう動きをしているかは知らないのですが、eclipseで編集していると、保存するごとにcssに変換をかけてくれていて、便利です。

コメント

タイトルとURLをコピーしました