Gruntfileの見本

下記の5つのプラグインを使用して、Gruntfileの見本を確認していきましょう。

Gruntfileの全容はこのページの最下部にありますが、順を踏んで読み進めてください。

まずは、Gruntの設定を包み込む"wrapper"関数についてです。

module.exports = function(grunt) {
}

この中で、設定オブジェクトを初期化します。

grunt.initConfig({
});

次に、プロジェクトの設定を、package.jsonファイルからpkgプロパティを通して参照できるようにします。これによって、package.jsonファイルのプロパティ値をすぐに参照できるようになります。

pkg: grunt.file.readJSON('package.json')

ここまでの内容を下記に取りまとめます。

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json');
  });
};

タスクの設定オブジェクトは、タスクと同じ名前の設定オブジェクトのプロパティとなります。そのため、"concat"タスクは、"concat"キー配下の設定オブジェクトになります。下記は、"concat"タスク用の設定オブジェクトになります。

concat: {
  options: {
    // 連結される各ファイル内の間に配置出力する文字列を定義
    separator: ';'
  },
  dist: {
    // 連結するファイル
    src: ['src/**/*.js'],
    // 結果として生成されるJSファイル
    dest: 'dist/<%= pkg.name %>.js'
  }
}

JSONファイル内のプロパティnameを参照する方法についてです。 package.jsonファイルのロード結果として、pkgとして定義されたプロパティからpkg.nameにアクセスします。これは、JavaScriptオブジェクトとして解析されています。 Gruntは設定オブジェクトのプロパティ値を出力できるシンプルなテンプレートエンジンを持っています。ここでは、concatタスクはsrc/内の全てのファイルを連結し、最終的に.jsファイルとして出力しています。

それでは、uglifyプラグインで、JavaScriptを圧縮する構成を組んでみましょう。

uglify: {
  options: {
    // バナーは出力時に先頭に挿入されます
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}

uglifyはdist/内にJavaScriptを連結・圧縮した結果のファイルを生成します。ここで使用している<%= concat.dist.dest %>は、連結タスク時に対象となるファイルです。

QUnitプラグインの設定は本当にシンプルで、所定の場所にQunitを実行するHTMLファイルを配置するだけです。

qunit: {
  files: ['test/**/*.html']
},

JSHintプラグインの設定も非常にシンプルです。

jshint: {
  // 対象となるファイルを定義します
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  // JSHintを構成します。(参照:http://www.jshint.com/docs/)
  options: {
      // JSHintの初期値を上書きしたい場合、ここにオプションを更に追加します
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}

JSHintはファイルの配列とオプションのオブジェクトを受け取ります。これらについては全て、 JSHint のサイトにドキュメント化されています。もし、JSHintの初期値で問題が無いのであれば、Gruntfile内で再定義する必要はありません。

最後に紹介するプラグインは、watchプラグインです。

watch: {
  files: ['<%= jshint.files %>'],
  tasks: ['jshint', 'qunit']
}

grunt watchは、コマンドライン上から実行することが出来ます。指定されたファイルが変更されたことを検知すると (ここでは、JSHintでチェックしたファイルと同じものが指定されています。)、指定されたタスクが順番に実行されます。

最後に、必要なGruntプラグインをロードします。これらは、npmを通してインストールされます。

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');

タスクの最終的な設定を行います。最も重要なタスクはdefaultタスクです。

// コマンドライン上で"grunt test"とタイプして実行します。
grunt.registerTask('test', ['jshint', 'qunit']);

// コマンドライン上で"grunt"とタイプして実行します。
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

そしてこれが完成したGruntfile.jsになります。

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';'
      },
      dist: {
        src: ['src/**/*.js'],
        dest: 'dist/<%= pkg.name %>.js'
      }
    },
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */
'
      },
      dist: {
        files: {
          'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
        }
      }
    },
    qunit: {
      files: ['test/**/*.html']
    },
    jshint: {
      files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
      options: {
        // options here to override JSHint defaults
        globals: {
          jQuery: true,
          console: true,
          module: true,
          document: true
        }
      }
    },
    watch: {
      files: ['<%= jshint.files %>'],
      tasks: ['jshint', 'qunit']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-qunit');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('test', ['jshint', 'qunit']);

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

};