Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt

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

Gruntfile.jsファイルにタスクを定義して実行する

　Gruntの設定や実行させたいタスクの定義はJavaScriptファイル（ファイル名「Gruntfile.js」）に記述します。makeにおけるMakefile、antにおけるbuild.xmlに相当するファイルです。記述例をリスト9に示します。

リスト9　Gruntfile.jsの記述

module.exports = function(grunt) { // 設定記述開始  ...（1）
    grunt.initConfig({  // Gruntの初期設定          ...（2）
        uglify: {       // contrib-uglifyのタスク   ...（3）
            target1: {
                files: [
                        // timer.js -> timer.min.js ...（4）
                    {'js/timer.min.js':
                        ['js_src/timer.js']},
                        // color.js -> color.min.js ...（5）
                    {'js/color.min.js':
                        ['js_src/color.js']},
                ]
            },
            options: {   // オプション指定          ...（6）
//              sourceMap: true,
//              maxLineLen: 1000
            }
        }
    });

    // contrib-uglifyプラグインをロード             ...（7）
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // uglifyタスクをdefaultに設定                  ...（8）
    grunt.registerTask("default", ["uglify"]);
};

　（1）のmodule.exports関数に指定された引数のgruntオブジェクトに対して、Gruntの設定やタスク定義を行います。（2）のgrunt.initConfig関数はGruntの初期設定を行う関数で、設定値は引数としてJavaScriptオブジェクトで指定します。

　grunt.initConfig関数引数内の（3）で「uglify」と記述することで、contrib-uglifyプラグインのタスクであることを定義します。uglify配下に複数の子タスクを定義可能ですが、リスト9では「target1」という子タスクを1つだけ定義しています。

　target1配下の「files」は最小化前後のファイル指定です。「{<ファイルA>:[<ファイル1>,<ファイル2>,...]}」のように記述すると、ファイル1、ファイル2...が結合／最小化されてファイルAに出力されます。リスト9では（4）と（5）の記述によりjs_src配下のtimer.jsとcolor.jsの最小化を行ってjs配下のtimer.min.jsとcolor.min.jsに出力するよう指定しています。

　（6）はcontrib-uglifyプラグインのオプション指定です（リスト9では何も指定していません）。主なオプション指定を表3に示します。全てのオプションはcontrib-uglifyのWeb文書で案内されています。

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

名称	内容	デフォルト値
sourceMap	ソースマップ（デバッグにおける最小化前のソース行特定に使用）を生成	false
maxLineLen	最小化後の1行の最大長	32000
banner	最小化後の先頭に付加する文字列	空文字
footer	最小化後の末尾に付加する文字列	空文字

　（7）はcontrib-uglifyプラグインを使用するためにロードする記述、（8）ではuglifyをデフォルトのタスクに設定する記述です。

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

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

grunt

　Gruntfile.jsの（8）によりデフォルト指定されているuglifyタスクが実行され、jsフォルダに最小化されたtimer.min.jsとcolor.min.jsが生成されます。

図5　コマンドプロンプトでGruntを実行

　なお明示的にタスク名を指定してリスト11やリスト12のように実行することも可能です。この場合Gruntfile.jsに（8）の記述は必要ありません。

リスト11　タスク名（uglifyタスク）を指定して実行するコマンド

grunt uglify

リスト12　タスク名（uglifyタスク内のtarget1子タスク）を指定して実行するコマンド

grunt uglify:target1

　生成されたJavaScriptファイルの内容を確認するとコメントや改行、スペースなどが削除され、変数名が短縮されているなど、最小化されていることを確認できます。

図6　timer.js（写真＝左）と最小化後のtimer.min.js（写真＝右）

まとめ

　本記事では、JavaScriptのタスク実行環境Gruntについて概要を紹介し、タスクを自動化するサンプルを示しました。今回紹介したJavaScriptの最小化はHTML／JavaScript開発で頻繁に行われる作業のため、開発が大規模になりJavaScriptの数が増えるほどに自動化の恩恵が大きくなります。

　冒頭でも紹介したように、Gruntでは様々なタスクを自動化できるプラグインが多数用意されています。次回はGruntのプラグインをいくつか紹介するとともに、それらを組み合わせたより実践的な利用法を紹介します。

参考資料

• Grunt
• Node.js