Gruntfile.jsを10行にした話

  • 49
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

背景

みんな大好きGrunt.jsですが、よくやることといえば

  • ファイル結合
  • コードの圧縮
  • SourceMapの生成
  • 構文チェック
  • テストの実施
  • ファイルの変更監視
  • JSTの吐き出し
  • ウェブサーバーの展開
  • livereload
  • シェルコマンドを叩く

とかがあげられるかなぁおもいます。
これらのタスクをGruntfile.jsに全部押し込むと、300行くらいになります。ディレクトリのパスを2,3個追記してサービスごとに独自の記述を増やしていくと、行数が2倍3倍に膨れ上がります。これを避けるのに、node使ってるんだしrequireを使いましょう、というお話。

Gruntfile.js

Gruntfile.jsでは、

  • initConfigで使うObjectの読み込み
  • NpmTaskの読み込み
  • gruntTaskの登録

の3つのみを行うものとしています。

Gruntfile.js
module.exports = function(grunt) {
  'use strict';
  var configObject = require('./grunt/config');
  var PACKAGE_JSON = grunt.file.readJSON("package.json");
  grunt.config.init(configObject);
  // Load Grunt Plugins
  Object.keys(PACKAGE_JSON.devDependencies).slice(1).forEach(grunt.loadNpmTasks);
  grunt.registerTask('default', ['connect', 'watch']);
  grunt.registerTask('release', ['less', 'jst', 'concat', 'jshint', 'uglify']);
};

config.js

  • initConfigInterface的な感じです
grunt/config.js
module.exports = {
  connect: require('./connect'),
  htmlmin: require('./htmlmin'),
  jst: require('./jst'),
  jshint: require('./jshint'),
  concat: require('./concat'),
  uglify: require('./uglify'),
  watch: require('./watch')
};

ほか

  • 1ファイル1モジュールで実装してきます
grunt/connect.js
module.exports = {
  server: {
    options: {
      port: 3000,
      base: 'www/'
    }
  }
};

おしまい

module.exports さいこう!

実装例
https://github.com/watilde/dartstack

追記

この記事を元に、Grunt Pluginをつくりました
Gruntfile.jsを短くするためのpluginの話@watilde

追記2

英訳書いてみました。
http://watilde.github.io/posts/make-gruntfile-js-10-rows/