複数プラグインを組み合わせて、より多くのタスクをGruntに任せよう

HTML／JavaScript開発作業を効率化する便利ツールの活用 第2回

各プラグインの機能紹介と設定方法

　Gruntのプラグインに実行させるタスクはGruntfile.jsファイルに記述します。以下では（前回記事で紹介した）contrib-uglify以外の各プラグインについて、機能と設定例を紹介していきます。全て記述済みのGruntfile.jsはサンプルコードに含まれています。

CSSの最小化をするcontrib-cssプラグイン

　contrib-cssプラグインはCSSを最小化するGruntプラグインです。図2のように、CSSファイルを最小化することができます。

図2　CSSファイルが最小化される

　Gruntfile.jsへのcontrib-cssプラグインのタスク記述は、リスト4のようになります。

リスト4　contrib-cssプラグインの設定

cssmin: {
    target1: {
        files: [
            // default.css -> default.min.css
            {"style/default.min.css":
                ["style_src/default.css"]},
            // page1.css、page2.css -> page.min.css
            {"style/page.min.css":
                ["style_src/page1.css", "style_src/page2.css"]},
        ]
    }
},

　filesに最小化前後のファイルを指定します。記述方法はcontrib-uglifyと同様で、「{<ファイルA>:[<ファイル1>,<ファイル2>,...]}」のように記述すると、ファイル1、ファイル2...が結合／最小化されてファイルAに出力されます。ここではdefault.cssを最小化してdefault.min.cssに、page1.cssとpage2.cssを結合／最小化してpage.min.cssに出力するよう指定しています。

ファイルをコピーするcontrib-copyプラグイン

　contrib-copyプラグインはファイルやフォルダをコピーする機能を提供します。設定はリスト5のように記述します。

リスト5　contrib-copyプラグインの設定

copy: {
    target1: {
        files: [
            {
                // フォルダツリーを維持
                expand: true,
                // コピー元
                src:["index.html","js/*","style/*"],
                // コピー先
                dest:"release/",

            }
        ]
    }
},

　srcにコピー元を複数指定した配列、destにコピー先を指定します。expandオプションをtrueに設定することで、複数階層のフォルダツリー構成を維持したままコピーを行います。ここではindex.html、（最小化されたJavaScriptが格納される）jsフォルダ配下の全ファイル、（最小化されたCSSが格納される）styleフォルダ配下の全ファイルをreleaseフォルダ以下にコピーするよう指定しています。

変更を監視するcontrib-watchプラグイン

　contrib-watchプラグインは、ファイルの変更を監視してタスクを実行します。設定はリスト6のように定義します。

リスト6　contrib-watchプラグインの設定

watch: {
    target1: {
        // 変更監視ファイル
        files: ["index.html", "js_src/*.js", "style_src/*.css"],
        // 実行するタスク
        tasks:["build"],
        options: {
            // livereloadを有効に
            livereload: true
        }
    }
}

　filesは変更を監視するファイル配列です。ここではindex.html、（最小化前のJavaScriptが配置される）js_src配下の*.jsファイル、（最小化前のCSSが配置される）style_src配下の*.cssファイルを指定しています。ファイルが変更された時に実行するタスクをtasksに指定します。ここでは後述するbuildというタスクを実行します。

　optionsはオプション指定です、表2に主なオプションを示します。eventオプションには、all（全て）／changed（変更時）／added（追加時）／deleted（削除時）が指定可能です。

表2　contrib-watchプラグインの主なオプション指定

名称	内容	デフォルト値
interval	変更監視の間隔	100（100ms）
event	変更対象のイベント	all（全てのイベント）
livereload	Webブラウザの自動リロードを行う	false（行わない）

　リスト6ではlivereloadオプションにtrueを設定して、コンテンツが更新された時にWebブラウザを自動的にリロードするようにしています。この機能を有効にするためには、HTMLファイルにリスト7のようなJavaScriptの参照設定を行うか、livereload.comで配布されているプラグインをWebブラウザに導入します。

リスト7　livereloadオプションを有効にするためのJavaScript参照

<script src="http://localhost:35729/livereload.js"></script>

　ダウンロードできるサンプルコードには、リスト7の記述が含まれています。