grunt-contrib-lessでGruntのビルド工程でLESSをプリコンパイルする。

WEB開発の工程を自動化できるGruntで、LESSのプリコンパイルを実行してみます。
Gruntについてはこちら。
JavaScriptやCSSの開発工程を自動化するGruntとは何か？

grunt-contrib-lessパッケージ

LESSのプリコンパイルには、grunt-contrib-lessを使います。grunt-contrib-lessのライブラリは、GitHubで公開されています。

gruntjs/grunt-contrib-less · GitHub
実際には、npmからインストールしてしまうので、GitHubを訪れる必要はありません。

package.jsonの設定

npmからgrunt-contrib-lessの依存を解決するために、package.jsonを書きます。

{
	"name": "sample",
	"version": "0.0.1",
	"devDependencies": {
		"grunt": "~0.4.4",
		// ...(略)...
		"grunt-contrib-less": "~0.11.0"
	}
}

お手元のpackage.jsonにgrunt-contrib-lessの行を追加するだけです。
このJSONの中では、0.11.0を指定していますが、現時点での最新バージョンは、0.11.4らしいです。

Gruntfile.jsの設定

あとは、Gruntfile.jsにlessの設定を追加するだけです。

module.exports = function(grunt) {
	grunt.initConfig({
		// ...(略)...
		less : {
			production : {
				options : {
					cleancss : true
				},
				files : {
					"css/main.css" : "less/main.less"
				}
			}
		}
	});
	// ...(略)...
	grunt.loadNpmTasks('grunt-contrib-less');
	grunt.registerTask('default', [...(略)..., 'less']);
};

これで設定完了です。
ターミナルからgrutnコマンドを実行！

grunt

main.lessからmain.cssが作成されます。