grunt js ビルドツール

grunt: a task-based command line build tool for JavaScript projects

WEB+DB PRESS Vol.70 の CoffeeScript 特集で取り上げられていた JavaScript ビルドツールの grunt。設定ファイルにまとめた JavaScript や CSS の結合や圧縮をやってくれ、様々なプラグインによって CoffeeScript や Compass のコンパイル等もできる便利ツール。

興味があったので、今携わっているスマホサイト制作のプロジェクトで使ってみた。
npm でインストールしたら、設定ファイルの JavaScript をちょろっと書いて、grunt コマンドで実行するだけ。サイトのドキュメント読むと何だか難しそうだけど、プロジェクトを作成するとかそんな大げさなことでなく、grunt.js を書いて適当なディレクトリに置いたら、コマンドを実行すればいいだけだった。

今回使っている grunt.js は以下のようなもの。CSS は sass で書いていたのだけど、WEB+DB PRESS の記事の注釈にも書かれていたように残念ながら sass のプラグインが動かなかったので、JavaScript のみ結合と圧縮のみを担当してもらっている。ちなみに各タスクに付けている「sp」というタスク名はスマホ用の意味。

module.exports = function(grunt) {

  grunt.initConfig({
    concat: {
      sp: {
        src: [ 'path/to/js/jquery-1.8.0.min.js',
               'path/to/js/jquery.cookie.js',
               // 他にもいくつかの js
            ],
        dest: 'path/to/document_root/js/all.js',
        separator: ';'
      }
    },

    min: {
      sp: {
        src: 'path/to/document_root/js/all.js',
        dest: 'path/to/document_root/js/all.js'
      }
    },

    watch: {
      sp: {
        files: '<config:concat.sp.src>',
        tasks: 'concat'
      }
    }
  });
  grunt.registerTask('default', 'concat min');
}

今回のこだわり(?)のポイントを二つ紹介。

一つ目は、JavaScript ファイルを結合する concat タスクで、separator オプションを指定してセミコロンを入れている点。
JavaScript ファイルが別々に読み込まれていれば、コードがセミコロンで終わっていなくても良いケースでも、コードが一つのファイルに結合されると、それぞれのコードがセミコロンで終わってくれてないと問題が出てくるケースがある。そんな問題が発生するのを抑止するため、結合時にセミコロンを挟んでしまおうというオプション指定。

二つ目は、JavaScript を圧縮する min タスクのソースと出力先ファイルを同じにしていることと、ソースの変更を監視して自動的にタスクを実行する watch タスクを通して実行するタスクに concat しか指定していないこと。
WEB+DB PRESS の記事では all.js → all.min.js に圧縮するようにし、watch タスクで結合と圧縮の両方を行うようにしていたけれど、今回のプロジェクトでは圧縮に 2 秒程掛かっていたため、開発時に JavaScript 変更してブラウザをリロードした際に間に合わないことがあった。
なので、watch タスクでは圧縮は省くようにした。で、圧縮の有り・無しでファイル名を変えてしまうと、HTML を書き換えないといけなくなってしまうので min タスクでの出力先ファイルもソースと同じにした。

grunt を初めて使ったけど、シンプルに使えるなかなか便利ツールだった。紹介してくれた WEB+DB PRESS の特集に感謝。

sass のコンパイルもできるようになるとより便利になるのだけれど、今まで Compass を使ったことなかったので、今度からは Compass 使うようにした方がいいのかも。

Last updated on July 8, 2015