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

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

プラグインの読み込みとタスク定義

　ここまで設定した各プラグインを読み込むために、Gruntfile.jsにはリスト8の記述が必要になります。

リスト8　package.jsonにGruntとプラグインの情報が追加された状態

grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-cssmin");
grunt.loadNpmTasks("grunt-contrib-copy");
grunt.loadNpmTasks("grunt-contrib-watch");

　最後にGruntのタスクを定義します。grunt.registerTaskメソッドの第1引数にタスク名、第2引数に登録するタスクを指定します。

リスト9　Gruntタスクの定義

// デフォルトタスク
grunt.registerTask("default", ["watch"]);
// buildタスク：uglify、cssmin、copy、logを実行
grunt.registerTask("build", ["uglify", "cssmin", "copy", "log"]);
// 独自タスク（ログ出力）
grunt.registerTask("log", function(){
    grunt.log.writeln("All tasks done!!");
});

　「default」タスクは、タスク名が指定されない場合に実行されるタスクを表します。ここではcontrib-watchプラグインのwatchタスクを指定します。また「build」タスクはリスト6の記述によりcontrib-watchプラグインが実行するタスクで、uglify（JavaScriptの最小化）、cssmin（CSSの最小化）、copy（ファイルコピー）、log（後述）のタスクを順番に実行します。

　なお「log」タスクのように、第2引数にJavaScript関数を指定して実行させることもできます。ここではタスクが終了した旨をコンソールに出力します。

Gruntの実行と動作確認

　ここまで準備ができたら、gruntコマンドを実行してタスクを実行します。

リスト10　Gruntでタスクを実行するコマンド

grunt

　実行するとdefaultタスクに指定されているwatchタスクが実行され、ファイルの変更監視が開始されます。この状態でindex.html、js_srcフォルダ配下の*.jsファイル、style_srcフォルダ配下の*.cssファイルのいずれかを変更すると、buildタスクが実行されてJavaScriptとCSSファイルが最小化され、HTMLファイルを含めた一式がreleaseフォルダにコピーされます。この時release配下のindex.htmlをブラウザで表示していれば、Webブラウザが自動的にリロードされます。

図3　ファイルを変更するとWebブラウザがリロードされる

補足：CoffeeScriptの活用

　Gruntでは、CoffeeScript（コンパイルしてJavaScriptにする、いわゆるAltJSの一つ）をサポートしています。CoffeeScriptをコンパイルするcontrib-coffeeプラグインが提供されているほか、設定ファイル自体もリスト11のようにCoffeeScriptで記述することができます（リスト11を含むGruntfile.coffee全体はダウンロードできるサンプルファイルに含まれます）。

リスト11　リスト4同等のcontrib-cssminプラグイン設定をCoffeeScriptで記述（Gruntfile.coffee）

# contrib-cssmin
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"]

　CoffeeScriptはコードブロックをインデント（字下げ）で表すため、JavaScriptでよくある「多数の中括弧や括弧で見通しが悪くなる」ことがなく、設定ファイルをより簡潔に記述できるメリットがあります。

まとめ

　本記事では、JavaScriptのタスク実行環境Gruntについて、複数プラグインを組み合わせて活用する設定方法を紹介しました。Gruntとプラグインを用いて、頻繁に実行される手順の組み合わせを自動実行させて開発効率をあげることができます。またcontrib-watchプラグインを用いるとファイルの変更をトリガーにタスクを自動実行できるため、開発者はタスク実行さえ意識する必要がなくなり、コーディングに集中することができます。

　プラグインをどのように組み合わせて、何をどのように自動実行させるのかを最初に考えるのはそれなりに手間がかかりますが、定形作業がはっきりしている場合には利用を検討してもよいのではないでしょうか。

参考資料

• Grunt
• Node.js