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

WEB開発の工程を自動化できるGruntで、LESSのプリコンパイルを実行してみます。

Gruntについてはこちら。

JavaScriptやCSSの開発工程を自動化するGruntとは何か?

grunt-contrib-lessパッケージ

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

スクリーンショット 2014-04-12 23.20.44

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が作成されます。

About katty0324

Comments are closed.

Scroll To Top