鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

Gruntの復習 (2)Gruntfile.jsを書く

前回の(1)インストールから初期設定に続き、実行するタスクを記述するGruntfile.jsを作成してみます。

Gruntfile.jsの構成

Gruntfile.jsは以下のような構成になっています。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  // grunt.loadNpmTasks('');
  
  // デフォルトタスクなどのタスク名を設定
  grunt.registerTask('default', []);
}

このように、grunt.initConfig()にタスクを記述し、grunt.registerTask()でdefaultなどにタスクを指定したり、タスク名を設定したりします。また、Gruntはプラグイン機構によりさまざまな機能を実現しています。プラグインを利用する際には、タスクを読み込むためにgrunt.loadNpmTasks()を使う必要があります。

Gruntfile.jsへのタスク追加

プラグインgrunt-contrib-uglifyを使い、JavaScriptのminifyを実行してみましょう。

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

以下のコマンドを実行します。gruntと同様、--save-devのオプションをつけてpackage.jsonへ記述が追加されるようにします。

npm install grunt-contrib-uglify --save-dev

タスク読み込み記述の追加

Gruntfile.jsへ以下を追記し、grunt-contrib-uglifyのタスクを読み込んで、使えるようにします。

grunt.loadNpmTasks('grunt-contrib-uglify');

現状のGruntfile.jsは以下のようになっています。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  // デフォルトタスクなどのタスク名を設定
  grunt.registerTask('default', []);
}

実行タスクの記述

grunt.initConfig()内に実行するタスクを記述します。ここでは仮に、src/js/*.jsをminifyしてdest/js/scripts.min.jsに出力するようにします。記述後のGruntfile.jsは以下のようになっています。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
    uglify: {
      dest: {
        files: {
          'dest/js/scripts.min.js': ['src/js/*.js']
        }
      }
    }
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  // デフォルトタスクなどのタスクを設定
  grunt.registerTask('default', []);
}

デフォルトタスクは設定していませんが、この時点でもタスク名を指定したタスクの実行が可能です。今回の場合だと、grunt uglifyでminifyが実行されます。

デフォルトタスクの設定

defaultというタスク名のタスクを指定すると、gruntを実行するだけでそのタスクが実行されます。ここではuglifyをデフォルトタスクにしてみましょう。grunt.registerTask()の箇所を以下のように変更します。

grunt.registerTask('default', ['uglify']);

gruntを実行するだけで、minifyが実行されるようになりました。

これで基本的なGruntfile.jsが完成です。Gruntfile.jsは次のようになります。

module.exports = function(grunt) {
  grunt.initConfig({
    // ここに実行タスクを記述する
    uglify: {
      dest: {
        files: {
          'dest/js/scripts.min.js': ['src/js/*.js']
        }
      }
    }
  });
  // プラグインを使用するときにタスクを読み込む記述を追加
  grunt.loadNpmTasks('grunt-contrib-uglify');
  
  // デフォルトタスクなどのタスク名を設定
  grunt.registerTask('default', ['uglify']);
}

ちなみに、Gruntfile.jsの代わりにCoffeeScriptを使ってGruntfile.coffeeを作成して使用することもできます。特にプラグインや設定の必要もありませんので、Coffeeに慣れている方はどうぞ。個人的にはそんなにCoffee使ってないのですが、Gruntの範疇なら簡単な記述しかしないので特に困ることもなく書けますし、なにより楽なんでいいかなと。

次回は色々とそれっぽいプラグインを追加してみることにします。と思ったのですが、タスクの記述方法についてきちんと理解していなかったため、そこを調べてみることにしました。