Grunt.md

Grunt Memo

最高の夏合宿で教えてもらったNode.jsのタスクランナーGruntを使ってみた

What's Grunt?

Node.jsで作られたタスク自動化ツール

• サーバーをたてる
• 構文チェック
• ファイルの結合
• 特定のフォルダ、ファイルの複製、削除
• メタ言語のコンパイル(Jade, CoffeeScript, TypeScript, Sass(Compass), Less, Stylusなど)
• HTML, JS, CSSなどをminify
• JS, CSSをgzipに圧縮
• CSS Spriteの自動生成
• 画像最適化
• LiveReload(ファイルを保存すると勝手にブラウザが更新される) スタイルガイドの生成

みたいなことができる

Why Grunt?

• keroxpの場合プロジェクトでcoffeeスクリプトを使っていて、それをjsに自動コンパイルしたかったから使い始めた

• その他stylus, jadeなども同じ

Directories

• Gruntfile.coffee
• package.json
• node_modules
• src
  • *.html
    • jade
    • fonts
    • coffee
    • stylus
    • css
      • bootstrap-3.0.0.css
      • reset.css
    • css.compile
    • js
      • underscore-1.5.2.js
      • backbone-1.0.0.js
      • jquery-2.0.3.js
      • bootstrap-3.0.0.js
      • intro.js
      • outro.js
    • js.compile
    • img
• test
  • test.htlm
• dist
  • index.html
  • css
  • js
  • img
  • fonts
• doc

Concat

• 複数のファイルを結合して一つのファイルにすること
• うまくやると依存関係を関係しつつ一つのファイルにまとめられる

Imagine...

• ファイルは全部coffeeで書きたい
  • 出来ればディレクトリも分けたい
• コンパイルされたjsファイルをひとつのファイルにまとめたい
  • 出来ればuglifyもしたい
• 依存するライブラリもまとめてしまいたい
• でも依存関係（実行の順番）は保証したい
• 個別のcoffeeファイルは匿名関数の中にスコープを閉じ込めたい
• 結合されたファイルもスコープを匿名関数の中に閉じ込めたい

Demo

Problems

• フレームワークへの導入が面倒
  • express.jsのどこにディレクトリを設置するか迷った
• タスクの記述が直感的ではない
  • 覚えるのが面倒
  • でも一度覚えたらめっちゃ便利