鴨のいいカモです

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

Gruntの復習 (3)タスクの書き方

Gruntの復習 (2)Gruntfile.jsを書く - 鴨のいいカモですにて色々タスクを追加してみると予告していたのですが、タスクの記述方法をきちんと理解していなかったことに気づいたので、そこを調べてみることにしました。

この部分です!

uglify: {
  dest: {
    // ターゲットdest
    files: {
      'dest/js/scripts.min.js': ['src/js/*.js']
    }
  }
}

公式サイトのドキュメントであるConfiguring tasks - Grunt: The JavaScript Task Runnerを参考に。

まず基本

JSONで書く…と思ったら、JSONではなくJavaScriptだそうで。ということでJSONだけではなく、JavaScriptで処理を書いてもよいそうです。

タスクについて

Gruntはタスクランナーとありますが、そのタスクは、上記でいうとuglifyの箇所です。Gruntはなにもしないと何もタスクが使えませんが、前に書いたgrunt.loadNpmTasks()でタスクを読み込むことで、利用可能なタスクを追加することができます。

プラグインの追加によってどのような名前のタスクが追加されるかは、追加するプラグインのドキュメントを確認してください。

タスクは、前回記述したようにgrunt タスク名で実行することができます。

ちなみに、現在使えるタスクはgrunt --helpで確認することができます。「Available tasks」の箇所に利用可能なタスクが表示されるはずです。

ターゲットについて

タスクには、ターゲットと呼ばれるものを指定することができます。上記でいうとdestの箇所です。ターゲットは任意の名前にすることができます。そして、複数定義することもできます。それにより、ターゲットごとに違う設定を実現することができます。以下はターゲットごとにminify結果の配置先を変更した例です。

uglify: {
  dest: {
    // ターゲットdest
    files: {
      'dest/js/scripts.min.js': ['src/js/*.js']
    }
  },
  build: {
    // ターゲットbuild
    files: {
      'build/js/scripts.min.js': ['src/js/*.js']
    }
  }
}

ターゲットを指定して実行するには、grunt タスク名:ターゲット名でOKです。

ターゲットを指定しないでgrunt タスク名とすると、全ターゲットを実行します。

変換元および変換先のファイル指定について

Gruntでは多くのタスクでファイルの変換や移動を行います。それらファイルの変換元と変換先は、ターゲットごとに以下の方法で指定することができるようです。

Compact Formatを用いる方法

以下のように、srcに変換元、destに変換先を指定します。

target: {
  src: ['src/a.js', 'src/b.js'],
  dest: 'dest/c.js',
}

Lintのように出力先が不要な場合は'dest'を省略します。また、これにオプションのプロパティをつけくわえることも可能のようです。

Files Object Formatを用いる方法

以下のように、filesを使い、変換元(src/*.js)と変換先(dest/c.js)を指定します。また特徴として、次のようにマッピングを複数持つことができます。

target: {
  files: {
    'dest/c.js': ['src/a.js', 'src/b.js'],
    'dest/f.js': ['src/d.js', 'src/e.js']
  }
}

ただし、オプションのプロパティを付け加えることはできないようです。

Files Array Formatを用いる方法

filesを使い、かつsrcdestも指定します。マッピングを複数持て、かつオプションのプロパティを付け加えることができるようです。ただ、記述が冗長ですね。

target: {
  files: [
    {src: ['src/a.js', 'src/b.js'], dest: 'dest/c.js'},
    {src: ['src/d.js', 'src/e.js'], dest: 'dest/f.js'}
  ]
}

変換元と変換先それぞれのファイル指定には、直接指定の他にpath/**/*.jsのような、いわゆるGlobパターンも使用することができます。

optionsについて

optionsプロパティを使用することで、タスクのデフォルト設定を上書きすることができます。optionsプロパティはタスクごとのみではなく、ターゲットごとに指定することができます。こんな感じですね。

uglify: {
  options: {
    report: 'min'
  },
  dest: {
    // ターゲットdest
    options: {
      beautify: true
    },
    files: {
      'dest/js/scripts.min.js': ['src/js/*.js']
    }
  },
  build: {
    // ターゲットbuild
    files: {
      'build/js/scripts.min.js': ['src/js/*.js']
    }
  }
}

全体でreport: 'min'(minifyのレポート出力)にし、ターゲットdestのみbeautify: true(デバッグ用に読みやすく整形)としています。

これで基本的なタスクの書き方はおさえられた感じです。その他にもファイル指定が便利になるプロパティや、テンプレートや外部データのインポートなどができるようです。詳しくは参考にしたConfiguring tasks - Grunt: The JavaScript Task Runnerを見てください。

次回は色々とタスクを追加してみようと思います、がはてさて。