CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧：Gruntで始めるWeb開発爆速自動化入門（2）（2/3 ページ）

JavaScriptメインでWeb開発を行う際にさまざまな作業を自動化して開発効率を爆発的に高めるツール（Grunt、Yeoman、Bowerなど）やエディター、IDE、実行環境などを紹介していく連載。今回は、Gruntプラグインの概要と便利なものをまとめたgrunt-contrib、ファイルが監視できるgrunt-contrib-watch、livereload（自動更新）を実現するgrunt-contrib-connectなどの使い方を解説する。

[中村修太，クラスメソッド]

プラグインのインストール

　次に、必要なプラグインをインストールします。grunt-plugin-sampleディレクトリに移動し、「npm init」コマンドで「package.json」を作成します（全部デフォルトでOKです）。そして、GruntとCoffeeScriptプラグインをインストールしましょう。

% cd grunt-plugin-sample
% npm init
% npm install grunt --save-dev
% npm install grunt-contrib-coffee --save-dev

　「save-dev」オプションを付けているので、package.jsonに依存関係が追記されます。下記のようなpackage.jsonになっていれば、環境の用意は完了です。

{
  "name": "grunt-plugin-sample",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-coffee": "^0.10.1"
  }
}

package.json

Gruntfile.js作成

　CoffeeScriptをコンパイルするためのGruntfile.jsを記述しましょう。

// 'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
    coffee: {
      compile: {
        files: {
         'dest/sample.js': ['src/sample.coffee']
      }
    }}
  });
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.registerTask('default', 'coffee');
};

　grunt.loadNpmTasksでgrunt-contrib-coffeeをロードします。conffee:compileタスクが使用できるようになるので、先ほど作成したファイルとその出力先を指定しています。

　また、デフォルトのタスクではcoffeeが指定されているので、実行時にタスクを指定しなくてもCoffeeScriptのコンパイルが実行されます。

動作確認

　全ての準備ができたのでGruntを実行してみましょう。

%grunt coffee
Running "coffee:compile" (coffee) task
Done, without errors.

　「dest」ディレクトリを見てください。コンパイルされた結果のjsファイルが生成されています。

　さて、先ほどのGruntfile.jsでコンパイルができましたが、src/sample.coffeeファイルにしか適用できません。

　しかし通常の開発では、複数のcoffeeファイルを使用することが多いでしょう。そういったケースではコンパイル対象を動的に指定できます。先ほど記述したcoffeeタスクを下記のように修正してください。

……
    coffee:{
     compile:{
       files:[{ 
         expand: true,
         cwd: 'src/',
         src: ['**/*.coffee'],
         dest: 'dest/',
         ext: '.js',
       }]
     }
   }
……

　次に「src」ディレクトリでサブディレクトリを作成し、そこに別のcoffeeファイルを作成してみましょう（sample.coffeeをコピーしても構いません）。

　そして再度、coffeeタスクを実行してみてください。「src」と同じ階層でdestにディレクトリが作成され、全てのcoffeeファイルがコンパイルされています。

【2】grunt-contrib-watchでファイルの監視

　次に使用してみるのはファイルの変更を監視プラグインです。指定した条件に合うファイルの変更を感知したタイミングで任意のタスクを実行できます。これを利用すれば、HTML変更のタイミングでlivereload（自動更新）を行ったり、CoffeeScriptファイルやSassファイル変更タイミングでコンパイルを実行したりすることができます。

プラグインのインストール

　まずはgrunt-contrib-watchプラグインをインストールしましょう。

% npm install grunt-contrib-watch --save-dev

Gruntfile.js作成

　そして、先ほどのGruntfile.jsを次のように修正します。

// 'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
  watch: {
      coffee:{
        tasks: 'coffee',
        files:['src/**/*.coffee']
      }
  },
  coffee:{
    compile:{
      files:[{ 
        expand: true,
        cwd: 'src/',
        src: ['**/*.coffee'],
        dest: 'dest/',
        ext: '.js',
      }]
    }
  }
  });
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'coffee');
};

　watchタスクでは「src」以下にあるcoffeeファイルの変更を監視し、変更を検知したらcoffeeタスクを実行するように指定しています。

動作確認

　gruntを実行してみましょう。「grunt watch」コマンドを実行すると、ファイルの監視が始まります。

% grunt watch
Running "watch" task
Waiting...

　この状態でcoffeeファイルを変更してみてください。ファイルを保存したタイミングでcoffeeファイルのコンパイルが実行されます。