チーム内パワーランチで発表したgrunt.jsの紹介資料です

1. grunt.jsのススメ
海賊 渋谷 貴裕

2. 背景
• 近年のソーシャルゲームはリッチ化している
• いかに待ち時間を少なくユーザーに提供するかが重要
• そこでcssやjsの圧縮が高速化に貢献
問題：CSSやjsの圧縮(難読化)をし忘れてしまう！
自動化したい！

3. gruntとは
• そこでgrunt
• gruntとは…
コマンドラインで使用するタスクベースのビルドツールのこと
• 設定ファイル上で指定したファイルに対してminifyのような
タスクを割り当てコマンドラインから実行できる！
タスク例
難読化、SassやCoffeeScriptのコンパイル、画像最適化など…

4. demo

5. pros/cons
• cssは更新されたファイルのみ難読化してくれる(comapssのおか
げ)
• jsは設定ファイルで切り分けてあげないと全jsファイルに圧縮が
走ってしまう
• 切り分けするには全jsファイルを、設定ファイルに記述しな
ければならない
• grunt0.4.0から「grunt.file.watchFiles」で更新があったファ
イルを取得可能(この機能削除されました)

6. インストール手順
• wiki参照
• node.jsが必要
• 最近gruntからgrunt-cliに移行した
• gruntの開発速い

7. インストールしたモジュール
• grunt-contrib-compass
• compassをgruntで使用するためのモジュール
• compass→cssのフレームワークライブラリ
• grunt-contrib-uglify
• uglify.js を用いてjsを圧縮するためのモジュール
• grunt-contrib-watch
• 監視するためのモジュール

8. 0.3から0.4への変更点
• 設定ファイルがgrut.jsからGruntfile.jsにリネーム
• Gruntfile.coffeeでも大丈夫です。
• grunt.registerHelperの廃止
• grunt.registerTaskのエイリアス記法が変更
• grunt.registerTask('default', ['jshint', 'nodeunit', 'concat']);という
感じで、第2引数が配列になってます。
• コンフィグの記述変更
• <config:prop.subprop> → <%= prop.subprop %>
• <json:file.json> → grunt.file.parseJSON('file.json')
• <file_template:file.js> →
grunt.template.process(grunt.file.read('file.js'))

9. Gruntfile.js
• https://gist.github.com/4314906#file-gruntfile-js

10. 結論
• Gruntを使えば自動でタスクを実行できる
• js全部に圧縮走ってしまう→要対応
• 開発が速いので今後の動向をチェックする必要あり
• stableな環境を求めてpackage.jsonでバージョン管理する必要あ
り