Grunt を使って LESS のコンパイル環境を作る
CSS を便利に書ける LESS は、これまで GUI の Less.app や WinLess を使ってコンパイルしていたが、設定がだんだん増えてきて面倒になってきた。そこで見つけたのが Grunt で、さまざまな処理（タスクと呼ぶ）を、設定ファイルを書くことで実行するためのプログラムだ。
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 に書かれた処理を実行してくれる。
参考
- Node.js のパッケージ管理ツール npm の作り方と package.json の使い方 | phiary
- npm について分かりやすかった
