grunt を使う

2012年10月29日 23:24 javascript — littlepad

grunt

grunt は、設定ファイルに登録したファイルに対して、
lint(JSHint)、concat、QUnit、minify などのタスクを一発でやってくれるタスクツール。
各タスクを個別に実行することも出来るし、対象ファイルが更新されたタイミングで
自動的に全タスクを実行させることも出来るので CI 的な使い方もできる。

npm で管理しているので事前に node.js がインストールされている必要がある。

インストール

npm install -g grunt

grunt.js の設定

/*global module:false*/
module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    lint: {
      files: ['src/all.js']
    },
    concat: {
      dist: {
        src: [
                'src/Hoge.js',
                'src/Piyo.js',
                'src/Fuga.js'
             ],
        dest: 'src/all.js'
      }
    },
    min: {
        dist: {
            src: ['src/all.js'],
            dest: 'public/js/all.min.js'
        }
    },
    watch: {
      files: [
                 'grunt.js',
                 'src/*.js'
             ],
      tasks: 'default'
    },
    jshint: {
      options: {
        curly: true,
        eqeqeq: true,
        immed: true,
        latedef: true,
        newcap: true,
        noarg: true,
        sub: true,
        undef: true,
        boss: true,
        eqnull: true,
        browser: true
      },
      globals: {}
    },
    uglify: {}
  });

  // Default task.
  grunt.registerTask('default', 'concat lint min');

};

タスクの実行

grunt

default で設定されたタスクが実行される。
この場合、concat、lint、minify が順番に実行されるので、4つの JS ファイルが
all.js にまとめられ、lint 実行後、minify して all.min.js として書き出される。

個別にタスクを実行したい時は、「grunt [task]」で実行出来る。

grunt lint  // lint のみ実行

watch

watch はコマンドを実行後、対象ファイル(watch の files に登録されているファイル)を監視し、
それらが更新されたタイミングでタスクを自動的に実行する。

grunt watch

grunt のデフォルトでは、テストフレームワークとして QUnit を
サポートしているようだけど、jasmine をタスクとして登録できないか試行錯誤中。

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP