関西フロントエンドUGの勉強会 kfug.connpass.com/event/17849/ で話したスライド

1. ふだんGRUNT使ってる!
2年目のWEB担当者が!
GULP使ってみた!
2015年9月26日!
いまどきのフロントエンド環境構築 @ TAM大阪!
@Uemmra3

2. おことわり
•内容はレベル低いです
•間違ってることとかは(こそっと)
教えてください

3. じこしょうかい1
•名前 上村 卓弘（うえむら たかひろ）
@Uemmra3
Ingressは青
•所属 Firefoxコミュニティ
JAG中国∼関西支部、つ部
CoderDojo、わんくま
鳥取県技術士会
"フォクすけ" (C) 2008 Mozilla Japan

4. じこしょうかい2
•鳥取県西部(西伯郡大山町)出身＆在住
•米子東高校出身
(@Matzの後輩)
•2014/3まで大阪住んでた
•仕事は建設コンサル
のサイト管理者
＆経営者

5. 大山町(だいせんちょう)

6. 大山町のグルメ

7. •FirefoxOSの翻訳Adventarとかやってます
じこしょうかい3

8. •ここから本題

9. •Gruntで出来てたことと
出来てなかったこと
•gulpを使ってみて
•まとめと抱負
•おまけ

10. •Gruntで出来てたことと
出来てなかったこと
•gulpを使ってみて
•まとめと抱負
•おまけ

11. •基本はホームページビルダー
製の静的サイト (フレーム分割、
PVカウンター)
•主な目的は新卒採用向けの情
報提供
当社のサイト

12. •採用ページ、社員ブログといっ
たコンテンツを追加
•jQueryでカルーセルやタブペー
ジなどを追加 (デザインの統一
性とかはない。。)
私のサイト更新内容

13. •SublimeText2で手打ちコー
ディング
•デプロイ時には、htmlやjsを
圧縮 (Grunt大活躍)
•ftpクライアントでアップ
サイト更新環境

14. Gruntで出来てたこと
•htmlファイルとかの
自動圧縮

15. •ファイル監視
•なんかエラーが出
続けてこける
Gruntで出来て
なかったこと
(́;ω;`)

16. •Gruntで出来てたことと
出来てなかったこと
•gulpを使ってみて
•まとめと抱負
•おまけ

17. •とりあえず圧縮は出来た
•ファイルサイズが少し異なる
ので追跡調査したい
•監視については
…時間切れ(́;ω;`)
gulpを使ってみて

18. •Gruntで出来てたことと
出来てなかったこと
•gulpを使ってみて
•まとめと抱負
•おまけ

19. !
!
!
参考「ビルドツールまとめ。Gruntとかgulpとか (フロント寄り)」
http://qiita.com/cognitom/items/db88babebeb869a4a198
Grunt vs gulpのデータ
Github★
2014/4
Github★
2015/9
プラグイン
2014/4
プラグイン
2015/9
Issues
2014/4
Issues
2015/9
Grunt 7,816 9,987 2,759 5,154 1,134 997
gulp 5,876 16,387 639 1,848 448 904
ひとこ
と
gulpは注目度が急上
昇！？
どちらもかなり増えて
いる
Open, Closeの合計

20. Grunt vs gulpの感想
早さ 監視 書き易さ
Grunt やや重い
お手上げ
(教えてほしい)
宣言的
gulp
それなりに
サクサク
ちゃんとやれば出
来るのかも？
手続き的
ひとこと
ファイル数もそ
んな多くない
これを実現できる
か？が選択のキー
ファクター
gulpの方がわか
り易い

21. • Broccoli.js
( .js をつけると
クグラビリティがアップ！)
• 公式サイトの情報
!
気になるもの

22. •Gruntで出来てたことと
出来てなかったこと
•gulpを使ってみて
•まとめと抱負
•おまけ

23. おまけ：シェルTips1
•カーソル移動
•Ctrl+A Ctrl+E
•esc, delete

24. おまけ：シェルTips2
•ディレクトリ移動
•cd -
•alias uuu='cd ../../../'

25. おまけ：シェルTips3
•バックグラウンド実行
•jobs fg bg
•runcommand&
•runcommand Ctrl+Z bg