grunt 入門


## 下準備

### インストール
~~~~
npm install -g grunt-cli
~~~~

## プロジェクトの作成

~~~~
npm init
~~~~
package.jsonの作成。対話式で色々と入れていく。最初の所で`grunt`って名前にしちゃうとおかしくなるっぽい。

~~~~
sudo npm install grunt grunt-contrib --save-dev
~~~~
node_modulesディレクトリの作成。依存関係プラグインとかがごそっと入る。

gruntにはおすすめプラグイン集みたいなのがあってgrunt-contribでそれらが全部ごそっと入る。超便利。

あ、あと何故かsudoでないとだめっぽい。謎。

ここまでで、node_modules	package.jsonが出来てるはず。

## Gruntfile.coffeeの作成

まずは、Gruntfile.coffeeを作る。

~~~~
touch Gruntfile.coffee 
~~~~

んでもってひな形の挿入。`Gruntfile.coffee`に以下を書き込みます。

~~~~
module.exports = (grunt) ->
~~~~
すべての設定はこのmodule.exportsの中に書き込んで行く、みたいな感じです。

では`grunt -h`を実行してみましょう。`grunt -h`ではGruntfileを解析して利用可能なタスクを確認することが出来ます。

~~~~
Available tasks
(no tasks found)
~~~~

この時点ではまだ何も登録されていないはず。

次にプラグインの読み込みを行います。

~~~~
module.exports = (grunt) ->
  pkg = grunt.file.readJSON 'package.json'
  for taskName of pkg.devDependencies when taskName.substring(0, 6) is 'grunt-'
    grunt.loadNpmTasks taskName
~~~~
pkg行はパッケージファイルの読み込みを、その下のforブロックではパッケージの依存関係から`grunt-`系のプラグインをタスクとして読み込んでいます。

`grunt.loadNpmTasks "pluginname"`　でプラグインの読み込み、というわけです。
ここは多分`grunt.loadNpmTasks "grunt-contrib"`でもOKなはず。

Gruntfile.coffeeを上記のように書き換えたら再度`grunt -h` で登録されたタスクを確認。一気にタスクが追加されているはずです。

~~~~
Available tasks
        concat  Concatenate files. *                                           
          copy  Copy files. *                                                  
          sass  Compile Sass to CSS *                                          
       compass  Compile Sass to CSS using Compass *                            
       csslint  Lint CSS files with csslint *                                  
        coffee  Compile CoffeeScript files into JavaScript *                   
       htmlmin  Minify HTML *                                                  
        cssmin  Minify CSS files *                                             
           jst  Compile underscore templates to JST file *                     
         clean  Clean files and folders. *                                     
      compress  Compress files. *                                              
         watch  Run predefined tasks whenever watched files change.            
     requirejs  Build a RequireJS project. *                                   
        uglify  Minify files with UglifyJS. *                                  
       connect  Start a connect web server. *                                  
    handlebars  Compile handlebars templates and partials. *                   
        jshint  Validate files with JSHint. *                                  
        stylus  Compile Stylus files into CSS *                                
          jade  Compile jade templates. *                                      
       jasmine  Run jasmine specs headlessly through PhantomJS. *              
         qunit  Run QUnit unit tests in a headless PhantomJS instance. *       
      imagemin  Minify PNG and JPEG images *                                   
          less  Compile LESS files to CSS *                                    
      nodeunit  Run Nodeunit unit tests. *                                     
        yuidoc  Create YUIDocs *                
~~~~


ただこのままではほとんど使い物にもならないので、各タスクごとの設定をしていかないと行けません…

grunt task -h とかでタスクごとのヘルプが見れれば楽なのに…

## taskファイルの設定方法(共通編)
　ほとんどのタスクが「ファイル」に対する操作となっているため,ファイルに関する設定の書き方には共通の記法が用意されています。

### Compact Format
　src-destの形式で記述する方法。

~~~~
grunt.initConfig
  concat:
    src: ['src/bb.js', 'src/bbb.js']
    dest:  'dest/b.js'
~~~~

### Files Object Format
　ハッシュのkey=>value でdist=>sourceを指定する方法。

~~~~
grunt.initConfig
  concat:
    files:
      'dest/a.js': ['src/aa.js', 'src/aaa.js'],
      'dest/a1.js': ['src/aa1.js', 'src/aaa1.js'],
~~~~

### Files Array Format
　配列で指定する方法。

~~~~
grunt.initConfig
  concat:
    files: 
      {src: ['src/aa.js', 'src/aaa.js'], dest: 'dest/a.js'},
      {src: ['src/aa1.js', 'src/aaa1.js'], dest: 'dest/a1.js'},
~~~~

各タスクプラグインごとの細かい設定のあれこれについては、各タスクプラグインのgithubリポジトリとかを参照するといいかも。