Gruntの基本的な使い方（grunt-contrib-uglifyで）

公式サイト

インストール

①Node.jsのインストール

②npmのグローバルパッケージとしてGruntコマンドラインインターフェースをインストール

$ npm install -g grunt-cli

③プロジェクトのトップディレクトリにpackage.jsonの作成

$ npm init

設定をきいてくるので、そのままEnterキーを押していき初期値のままでも問題ない

④プロジェクトのローカルパッケージとしてGruntをインストール

--save-devオプションでgruntを依存パッケージとしてpackage.jsonに差し込む

$ npm install grunt --save-dev

⑤プロジェクトのローカルパッケージとしてGruntプラグインをインストール

--save-devオプションでgrunt-contrib-uglifyを依存パッケージとしてpackage.jsonに差し込む

npm install  grunt-contrib-uglify --save-dev

タスクの定義

Gruntfile.jsのファイル名でタスクを記述

Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    //親タスク（1階層目のキーは仕様で決められている）
    uglify: {
      //ターゲット（2階層目のキーは任意のキー）
      dist: {
        //子タスク（3階層目のキーは仕様で決められている）
        files: {
          //出力
          'dest/output.min.js': [
            //ソース
            'src/sample01.js',
            'src/sample02.js'
          ]
        }
      }
    }
  });
  //プラグインからタスクを読み込む
  grunt.loadNpmTasks('grunt-contrib-uglify');
  //デフォルトのタスクとしてuglifyを定義
  grunt.registerTask('default', ['uglify']);
};

タスクの実行

defaultのタスクを実行

$ grunt

uglifyの全タスクを実行

$ grunt uglify

uglifyのdistのタスクのみ実行

$ grunt uglify:dist

---

CoffeeScriptでGruntfileを記述

グローバルパッケージにcoffee-scriptをインストールしておく必要がある

$ sudo npm install -g coffee-script

Gruntfile.coffee

module.exports = (grunt) ->
  grunt.initConfig
    uglify:
      dist:
        files:
          'dest/output.min.js':[
            'src/sample01.js',
            'src/sample02.js'
          ]

  grunt.loadNpmTasks 'grunt-contrib-uglify'
  grunt.registerTask 'default', ['uglify']

gruntコマンドでJavaScriptで記述した場合と同様に実行できる

$ grunt