Grunt を使用した Node.js アプリのビルド

最終更新日 2021年12月09日(木)

Grunt​ は、プラグインの大規模なライブラリ (grunt-contrib-*) を含む Node.js プロジェクトのための汎用的なタスクランナーです。タスクを自動化することによって、プロジェクトのプロセスを効率化 (およびチームでの人為的ミスを削減) できます。

この記事では、Heroku での Grunt を使用した Node.js ビルドの自動化について説明します。独自のプロジェクトに従うことも、GitHub​ から例を複製することもどちらも可能です。

プロジェクトで Gruntfile を指定する

Grunt は、プロジェクトのルートに package.json​ と共に存在する Gruntfile.js​ を使用して設定されます。この例では、次の単純な Gruntfile を使用します。

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/factorial.js',
        dest: 'build/factorial.min.js'
      }
    }
  });

  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');

  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

この設定は、src/factorial.js​ を縮小された build/factorial.min.js​ にビルドする 1 つのタスク uglify​ を指定します。

Grunt と必要なプラグインをインストールする

プロジェクトのすべての依存関係が package.json​ で追跡されるように、npm モジュールは常にローカルに (-g つまり global オプションなしで) インストールする必要があります。すべての Grunt プロジェクトには grunt と grunt-cli が必要になります。これは、次のようにインストールできます。

$ npm install grunt grunt-cli

プロジェクトによって使用される Grunt プラグインもすべてインストールする必要があります。この例では、grunt-contrib-uglify​ を使用しています。

$ npm install --save-exact grunt-contrib-uglify

build スクリプトで Grunt タスクを指定する

Grunt をビルドツールとして使用するには、npm モジュールがインストールされた後で​、かつアプリを起動する前に​ uglify タスクを実行する必要があります。それがまさに、package.json​ 内の build​ スクリプトが Heroku へのデプロイ時に実行する内容です。package.json​ に次の行を追加します。

"scripts": {
    "build": "grunt uglify",
    "start": "node server.js"
  }

生成されたファイルを無視する

生成されたファイルは、すでに追跡されているファイルに依存し、衝突の原因になるだけであるため、Git で追跡するべきではありません。Grunt タスクによってソース管理での変更がトリガーされないように、生成されたパスをすべて .gitignore​ に追加します。

node_modules
build/*.js

ビルドをチェックする

自動化されたワークフローをローカルで簡単に実行できます。プロジェクトが設定されていない場合は、次の例を自由に複製できます。

$ git clone https://github.com/heroku-examples/node-grunt.git
$ cd node-grunt

ここで、build​ スクリプトによって、縮小されたファイルが /build​ 内に生成されることを確認します。

$ npm install
$ npm run build

> node-grunt@1.0.0 build /Users/jmorrell/workspace/node-grunt
> grunt uglify

Running "uglify:build" (uglify) task
>> 1 file created.

Done, without errors.

成功です。

Heroku にデプロイする

$ git push heroku main

ビルド出力を監視すると、Grunt タスクが実行されていることがわかります。

remote:        Running build
remote:
remote:        > node-grunt@1.0.0 build /tmp/build_e414c7cff23f45169616765eae55c51e
remote:        > grunt uglify
remote:
remote:        Running "uglify:build" (uglify) task
remote:        >> 1 file created.
remote:
remote:        Done, without errors.

まとめ

Grunt 機能の追加は簡単です。build​ フックを使用して、Grunt タスクがビルドプロセスの一部として確実に実行されるようにするのみです。