2014.04.26 GruntFrontOsaka Vol.1

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. ご清聴ありがとうございました