Gruntを使い始めてから半年経った。Gruntは主にJavascriptとCSSファイルのminifyを自動化する目的で使用している。

Gruntとは

Gruntとは，JavaScriptで書いたタスクを実行してくれるアプリケーション（JavaScript Task Runner）である。面倒な作業として，以下のような作業があるが，Gruntを使うことでこれらを自動化することが出来る。

  • minify（圧縮）や結合
  • 単体テストの実行
  • JSLint（構文チェック）の実行
  • CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）の実行
  • SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合には，コンパイル（CSS変換）の実行

Gruntの使い方

GruntはNode.jsを使用して作られている。そのためGruntをインストールする際には，あらかじめhomebrewなどでNode.jsをインストールしておく必要がある。

Gruntのインストール

Gruntは，Grunt本体とgrunt-cliが組み合わさって動作する。そのため，Grunt本体とgrunt-cliを一緒にインストールするが，コマンドから直接インストールするのではなく，package.jsonというファイルを作成し，このファイルを介してインストールする。

package.jsonを作成し，以下のように記述する。

{
    "name": "my-project-name",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.3",
        "grunt-cli": "~0.1.9"
    }
}

package.jsonが存在するディレクトリで以下のコマンドを実行することで，package.jsonに記述したnodeモジュールをインストールすることが出来る。今回の場合はGruntをインストールすることが出来る。

npm install

このpackage.jsonというファイルはNode.jsのプロジェクトにおいて，そのプロジェクトの名称やバージョン，依存するモジュールを書いておくためのファイルである。Grunt自体もこのpackage.jsonを使って利用するプラグインを管理し，そしてGrunt自体もこのファイルへ依存モジュールとして登録する。
Gruntが，このような回りくどい管理方法を取っている理由は，Gruntのバージョンが異なるプロジェクトを単体のGruntでは同時に管理できない為である。
例えば，プロジェクトAではバージョン0.3.1を使っているが、プロジェクトBでは0.3.16を使っていて、マシンにはGrunt 0.3.16がインストールされている……という場合，始めのプロジェクトがビルドできなくなってしまう可能性がある。

続いてGruntfile.jsというgruntの設定ファイルを作成する。一纏めにして実行出来る個々の設定を「タスク」と呼ぶ。以下の内容でGruntfile.jsを作成する。

module.exports = function (grunt) {
    grunt.registerTask('hello', 'description here', function() {
        grunt.log.writeln('hello World!');
    });
    grunt.registerTask('default', [ 'hello' ]);
};

この状態でgruntコマンドを実行する。

grunt

以下のように表示されればタスクが成功している。

Running "hello" task hello World! Done, without errors.

JavascriptとCSSを自動的にminifyしてみる

今回，冒頭で触れたJavascriptとCSSのファイルをminifyする方法を説明する。

プラグインを追加インストールする

{
    "name": "my-project-name",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.3",
        "grunt-cli": "~0.1.9",
        "grunt-contrib-cssmin": "0.4.1",
        "grunt-contrib-uglify": "~0.4.0",
        "grunt-contrib-watch": "~0.5.3"
    }
}

上記のようにpackage.jsonに追記し，以下のプラグインを新たにインストールする。

  • grunt-contrib-cssmin: CSSファイルをminifyする。
  • grunt-contrib-uglify: JSファイルをminifyする。
  • grunt-contrib-watch: ファイルの変更を監視してタスクをトリガーする。

package.jsonへ記述後，以下のコマンドでプラグインをインストールする。

npm install

Gruntfile.jsを作成する

プラグインがインストール出来たので，Gruntfile.jsにタスクを記述する。
記述例としては以下のようになる。ファイル名は適宜書き換えてほしい。

module.exports = function(grunt) {
    grunt.initConfig({
        cssmin : {
            pc : {
                src : ['css/reset.css', 'css/styles.css'],
                dest : 'css/pc.min.css'
            },
            mobile : {
                src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],
                dest : 'css/mobile.min.css'
            }
        },
        uglify : {
            build : {
                options : {
                    banner : grunt.file.read('js/License.js'),
                },
                src : ['js/BitmapData.js', 'js/GlowFilter.js'],
                dest : 'js/all.min.js'
            }
        },
        watch : {
            css_pc : {
                files : ['css/reset.css', 'css/styles.css'],
                tasks : ['cssmin', 'copy:css']
            },
            css_mobile : {
                files : ['css/mediaqueries.css'],
                tasks : ['cssmin:mobile', 'copy:css']
            },
            js : {
                files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],
                tasks : ['uglify', 'copy:js']
            }
        },
    });
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

CSSファイルとJSファイルの変更を監視し，変更があったファイルを自動的にminifyする。
エラーなどが出ずにminifyが正常に行われていれば成功である。

また，ファイルの変更を監視（grunt-contrib-watchを使用）しない場合はgruntコマンドを実行することでminifyを行うことが出来る。

grunt

各プラグイン毎の設定方法は以下のページに詳しく載っていた。
Plugins – Grunt: The JavaScript Task Runner

参考
現場で使えるGrunt入門 – Gruntを試そう | CodeGrid
「今どきのGruntを使ったフロントエンド開発（HTML/CSS編）」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp
Gruntで始めるWeb開発爆速自動化入門（1）：ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – ＠IT