Less/Sass/Stylus をGruntでコンパイルする

ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。

• grunt-contrib-less – LessをCSSにコンパイルします
• grunt-contrib-sass – SassをCSSにコンパイルします
• grunt-contrib-stylus – StylusをCSSにコンパイルします

指定できるオプションは異なりますが、設定の仕方に差はありません。

違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作させられますが、 RubyベースのSassは外部のsassコマンドを呼び出す仕組みになっており、別途インストールが必要です。 結果、Gruntとより相性が良いのはLess/Stylusであると言えますね。

ここでは、私の好きなLessを例にあげてみます。

Lessをコンパイルする（grunt-contrib-less）

基本設定

まず “grunt-contrib-less” をインストールしておきます。

$ npm install grunt-contrib-less

Gruntfile.js の内容は、例えば次のようになります。

module.exports = function(grunt){

    // grunt-contrib-less タスクの読み込み
    grunt.loadNpmTasks("grunt-contrib-less");

    grunt.initConfig({
        less : {
            // 作業のラベルは"dist"にしてみます
            dist : {
                // オプションの指定
                options : {
                    compress : true
                },
                // コンパイルするファイルの指定
                files : {
                    "./assets/css/style.css" : "./assets/less/style.less"
                }
            }
        }
    });
};

※ 基本的なタスクの書き方については 前編 にて

“options”セクションでオプションの設定を行い、 “files”セクションで出力するファイルの指定を行います。

“files”のキー（左辺）には出力先のCSSファイル、値（右辺）には元となるLessファイルへのパスを指定してください。 上の例では、 “./assets/less/style.less” がコンパイルされた結果が、”./assets/css/style.css” に保存されます。

実行

$ grunt less:dist

オプション

多く使われるであろうオプションは次の物でしょう。

• compress : Boolean (false) – 空白などを除去して圧縮します
• yuicompress : Boolean (false) – cssmin.js（YUICompressorのJS版）で圧縮します

その他のオプションについては grunt-contrib-lessのREADME を参照してください。

ファイルの更新を検知してコンパイルする（grunt-contrib-watch）

基本設定

多くのコンパイラにも実装されているファイル監視機能ですが、 Gruntでも grunt-contrib-watch というプラグインとして提供されています。

npm install grunt-contrib-watch

先ほどのLessのタスクを、ファイルを監視して実行してみます。

module.exports = function(grunt){
    grunt.loadNpmTasks("grunt-contrib-less");
    grunt.loadNpmTasks("grunt-contrib-watch");

    grunt.initConfig({
        less : {
            dist : { ... }
        },
        watch : {
            // ラベルは"less"にしてみます
            less : {
                // "files"セクションで監視するファイルの条件を指定
                files : [
                    "./assets/less/*.less"
                ],
                // "tasks"セクションで実行するタスクを指定
                tasks : [
                    "less:dist"
                ]
            }
        }
    });
};

“files”セクションで監視するファイルの条件を設定します。 そして“tasks”セクションで、“files”のファイルが更新された場合に実行するタスクを設定します。

“files”の値には、直接ファイル名を指定する他にパターンマッチングを使用する事ができ、特定ファイルの除外などの細かい設定が可能です。 詳細は公式ドキュメントにあるのでご参照ください。

cf) Globbing patterns | Configuring tasks – Grunt: The JavaScript Task Runner

実行

監視を開始するとターミナルは待機状態になります。

$ grunt watch:less
Running "watch:less" task
Waiting...

“./assets/less/” にあるLessファイルを更新すると、自動的に “less:dist” タスクを実行する様になります。

livereload もある？

私は使ったことがありませんが、livereload（ファイル更新を検知してブラウザをリロードする）を実現するプラグインもあるようです。

• gruntjs/grunt-contrib-livereload · GitHub

ここでは説明を省きますが、このプラグインは上で挙げた “grunt-contrib-watch” ではなく “grunt-regarde” の使用が推奨されるようです。

Note that grunt-contrib-livereload is designed to use grunt-regarde instead grunt-contrib-watch (mainly due to shortcomings in the watch task which doesn’t give access to changed files because it spawns tasks in subprocesses.)

GUIコンパイラでいいんじゃないの？

非常にもっともなご意見です。

本記事で挙げたCSSプリコンパイラの事例に限って言えば、 Compass、CodeKitやLess.app等、優秀なGUIコンパイラが数多くリリースされているので、 「黒い画面」が苦手な方は無理して導入する事もないと思います。

ただ、GUIコンパイラに対するGruntの優位点を挙げるとすれば、 環境を跨いでの設定の共有が極めて容易な点かな、と思っています。 nodeが動く環境ならばOS問わずどこでも同じ設定ファイルで、コマンド一発で同じ事が出来るわけです。

前編で触れたGruntの魅力に興味を持たれたならば、 これを機に「黒い画面」とのお付き合いを始めてみても良いのではないでしょうか。

まとめ

そんなわけで、最近ではGitとGruntとBowerのセットで制作を進めています。

これらの優秀なソフトウェアの開発者には足をむけて寝られませんが、 オープンソース故に多方面にいらっしゃるわけで、逆立ちして寝るしかなさそうです。