Gruntの罪と罰

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

description

2014.04.26 GruntFrontOsaka Vol.1

Transcript of Gruntの罪と罰

Page 1: Gruntの罪と罰

Gruntの罪と罰Grunt Front Osaka vol.1

2014.4.26

Page 2: Gruntの罪と罰

自己紹介• かみやん (Twitter@kamiyam) http://nantokaworks.com

• Engineer

• 主にJavaScriptでお仕事をしている人

• ボルダリング/人狼/カメラ/自動車

Page 3: Gruntの罪と罰

What is Grunt?

Page 4: Gruntの罪と罰

Gruntを使う理由•タスクランナー

•自動化

•作業時間の短縮

Page 5: Gruntの罪と罰

Grunt is Task Tool

Page 6: Gruntの罪と罰

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

Page 7: Gruntの罪と罰

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

Page 8: Gruntの罪と罰

Node.js、Ruby

PHP(WordPress・CakePHP) etc...

Page 9: Gruntの罪と罰

フレームワーク、CMSを

Grunt で使う時の考え方 

Page 10: Gruntの罪と罰

• APIのレスポンスを展開する

テンプレートファイルのJS化

•サーバスクリプトの実行

Page 11: Gruntの罪と罰

•サーバサイドとのReverseProxy

連携用サーバ (LiveReload前提)

• ViewファイルのwatchとLiveReload 

Page 12: Gruntの罪と罰

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

Page 13: Gruntの罪と罰

• 会社のプロジェクトテンプレート

•フレームワーク

• Yeomen

Page 14: Gruntの罪と罰

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

Page 15: Gruntの罪と罰

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

Page 16: Gruntの罪と罰

オレオレGruntfile

Page 17: Gruntの罪と罰

Grunt Weekly

https://twitter.com/gruntweekly

Page 18: Gruntの罪と罰

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

Page 19: Gruntの罪と罰

• grunt-exec

• grunt-shell

grunt からのコマンド実行

Page 20: Gruntの罪と罰

Grunt で

"大体のことが出来る"ようになる

Page 21: Gruntの罪と罰

grunt全能感

Page 22: Gruntの罪と罰

"大体のことが出来る” のですべて

grunt でやってしまおうとする

Page 23: Gruntの罪と罰

•データベースの起動

• git連携

飽くなき自動化への欲求

Page 24: Gruntの罪と罰

grunt は便利

Page 25: Gruntの罪と罰

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

Page 26: Gruntの罪と罰

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

Page 27: Gruntの罪と罰

grunt の罪

Page 28: Gruntの罪と罰

積み重なるTaskの設定

Page 29: Gruntの罪と罰

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

Page 30: Gruntの罪と罰

スポットのコーディングで 気が付くとGruntfile.js の設定を

作りはじめてしまう

Page 31: Gruntの罪と罰

grunt 依存

Page 32: Gruntの罪と罰

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

Page 33: Gruntの罪と罰

grunt-bower-task・・・

Page 34: Gruntの罪と罰

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

Page 35: Gruntの罪と罰

grunt の罪

Page 36: Gruntの罪と罰

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

Page 37: Gruntの罪と罰

ツールとしての賞味期限

Page 38: Gruntの罪と罰

先行しているツールである分、 変化も大きい

例えばv0.3 -> v0.4

Page 39: Gruntの罪と罰

v0.5 も登場する  このあたりの変化が大きい

フレームワークは Roadmap がとても重要

Page 40: Gruntの罪と罰

gruntを選択する理由

Page 41: Gruntの罪と罰

個人的には使うフレームワークがgruntを使っているから使う

というスタンス

Page 42: Gruntの罪と罰

便利である分 後追いで色々なツールも

登場している

Page 43: Gruntの罪と罰

Grunt vs gulp?

Page 44: Gruntの罪と罰

gulp

Page 45: Gruntの罪と罰

「Gruntに置き換わるか?新生ビルドシステム「gulp」v3.5.2入門」

http://re-dzine.net/2014/02/getting-started-with-gulp/

Page 46: Gruntの罪と罰

「タスクランナーgulp最速入門」

http://d.hatena.ne.jp/anatoo/20140420/1397995711

Page 47: Gruntの罪と罰

gulp Weekly

https://twitter.com/GulpWeekly

Page 48: Gruntの罪と罰

工程の問題ではない

Page 49: Gruntの罪と罰

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

Page 50: Gruntの罪と罰

(個人的に)Sails.jsが

gulpに変わったら乗換え(ry)

Page 51: Gruntの罪と罰

フロントエンドの livereload とcompile程度なら

middlemanを薦めている。

Page 52: Gruntの罪と罰

Middleman

Page 53: Gruntの罪と罰

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

Page 54: Gruntの罪と罰

grunt-throttle

Page 55: Gruntの罪と罰

まとめ

• Webの人全てに関わる

•やった分は楽になる

•ただしコストとのバランス大事

Page 56: Gruntの罪と罰

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