Grunt を使って LESS のコンパイル環境を作る

CSS を便利に書ける LESS は、これまで GUI の Less.app や WinLess を使ってコンパイルしていたが、設定がだんだん増えてきて面倒になってきた。そこで見つけたのが Grunt で、さまざまな処理(タスクと呼ぶ)を、設定ファイルを書くことで実行するためのプログラムだ。

node.js をインストールする

入っていない場合は入れる。インストーラが用意されているので、それを実行するだけ。

Grunt をインストールする

node.js のパッケージ管理ソフト npm で簡単にインストールできる。Mac の場合はスーパーユーザで。

# npm install -g grunt-cli

grunt-cli 0.1.11 がインストールされた。

package.json を作る

まず、必要なツールをインストールするために package.json を作る。一度作っておけばコピーしてほかのプロジェクトでも使い回せるので便利だ。

package.json を作るにはプロジェクトのディレクトリに移動して次のコマンドを実行する。対話式にいくつか質問されるので適当に答えていく。

% npm init

続いて次のコマンドで Grunt およびプラグインのインストールを行う。*1

% npm install grunt less@1.5.1 grunt-contrib-watch grunt-contrib-less --save-dev

ここで --save-dev オプションを付けると、package.json にインストールしたパッケージの情報を書き込んでくれる。

  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-less": "~0.8.2",
    "less": "~1.5.1"
  }

このファイルがあれば別のプロジェクトで同じ設定を使いまわすことができる。次回からは package.json をプロジェクトにコピーし、次のコマンドを実行するだけでよい。

% npm install

Gruntfile.js でタスクを指示する

次に自動化する作業を指示する Gruntfile.js を作る。Less ファイルを監視して、空白を取り除いた CSS を出力したい場合は次の記述でできた。

module.exports = function(grunt) {
	
	grunt.loadNpmTasks("grunt-contrib-less");
	grunt.loadNpmTasks("grunt-contrib-watch");
	
	grunt.initConfig({
		less: {
			style: {
				options: { cleancss: true },
				src: "less/style.less",
				dest: "public_html/css/style.css"
			},
		},
		watch: {
			less: {
				files: ["less/*.less"],
				tasks: ["less"]
			}
		}
	});

	grunt.registerTask("default", ["less", "watch"]);
};

あとは grunt コマンドを実行すると、 Gruntfile.js に書かれた処理を実行してくれる。

*1:Windows だと Less のバージョンが違うと怒られたので less@1.5.1 のようにバージョンを指定してインストールした