1.
Gruntの罪と罰
Grunt Front Osaka vol.1
2014.4.26

2.
自己紹介
• かみやん (Twitter@kamiyam)
http://nantokaworks.com
• Engineer
• 主にJavaScriptでお仕事をしている人
• ボルダリング/人狼/カメラ/自動車

3.
What is Grunt?

4.
Gruntを使う理由
• タスクランナー
• 自動化
• 作業時間の短縮

5.
Grunt is Task Tool

6.
フロントエンドだけで
タスクは終わるものではない

7.
サーバサイドにも
タスクは多数存在する

8.
Node.js、Ruby
PHP(WordPress･CakePHP) etc...

9.
フレームワーク、CMSを
Grunt で使う時の考え方

10.
• APIのレスポンスを展開する
テンプレートファイルのJS化
• サーバスクリプトの実行

11.
• サーバサイドとのReverseProxy
連携用サーバ (LiveReload前提)
• ViewファイルのwatchとLiveReload

12.
テンプレート化された
フォルダ構成などで使うと
最大の効果を発揮する

13.
• 会社のプロジェクトテンプレート
• フレームワーク
• Yeomen

14.
プロジェクト初期から導入

15.
大人数でタスクが共用できる

16.
オレオレGruntfile

17.
Grunt Weekly
https://twitter.com/gruntweekly

18.
Grunt からシェルコマンドが
実行できる

19.
• grunt-exec
• grunt-shell
grunt からのコマンド実行

20.
Grunt で
"大体のことが出来る"ようになる

21.
grunt全能感

22.
"大体のことが出来る” のですべて
grunt でやってしまおうとする

23.
• データベースの起動
• git連携
飽くなき自動化への欲求

24.
grunt は便利

25.
確かにこれは揺るぎない事実

26.
正直、grunt を使わないと
仕事にならないぐらい

27.
grunt の罪

28.
積み重なるTaskの設定

29.
タスクを解消するために
新たなタスクを作る結果に

30.
スポットのコーディングで
気が付くとGruntfile.js の設定を
作りはじめてしまう

31.
grunt 依存

32.
じ、じゃあこれ、bower と
連携すれば一層便利になるはず・・・

33.
grunt-bower-task・・・

34.
コストとの効率の
程よいバランスが必要

35.
grunt の罪

36.
タスクツールは以前から存在して
いたが Node.js の柔軟さが受け入
れられ広く使われる事になった

37.
ツールとしての賞味期限

38.
先行しているツールである分、
変化も大きい
例えばv0.3 -> v0.4

39.
v0.5 も登場する
このあたりの変化が大きい
フレームワークは
Roadmap がとても重要

40.
gruntを選択する理由

41.
個人的には使うフレームワークが
gruntを使っているから使う
というスタンス

42.
便利である分
後追いで色々なツールも
登場している

43.
Grunt vs gulp？

44.
gulp

45.
「Gruntに置き換わるか？新生ビルドシ
ステム「gulp」v3.5.2入門」
http://re-dzine.net/2014/02/getting-
started-with-gulp/

46.
「タスクランナーgulp最速入門」
http://d.hatena.ne.jp/anatoo/
20140420/1397995711

47.
gulp Weekly
https://twitter.com/GulpWeekly

48.
工程の問題ではない

49.
早く成果物が上がる方を
選べば良いと思います

50.
（個人的に）Sails.jsが
gulpに変わったら乗換え(ry)

51.
フロントエンドの
livereload とcompile程度なら
middlemanを薦めている。

52.
Middleman

53.
手作業では再現出来ない環境を
構築するときなどで使うとよい

54.
grunt-throttle

55.
まとめ
• Webの人全てに関わる
• やった分は楽になる
• ただしコストとのバランス大事

56.
ご清聴ありがとうございました