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