2015.09.26 gulp使ってみた
TRANSCRIPT
![Page 1: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/1.jpg)
ふだんGRUNT使ってる!2年目のWEB担当者が!GULP使ってみた!
2015年9月26日!いまどきのフロントエンド環境構築 @ TAM大阪!
@Uemmra3
![Page 2: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/2.jpg)
おことわり
•内容はレベル低いです •間違ってることとかは(こそっと)教えてください
![Page 3: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/3.jpg)
じこしょうかい1•名前 上村 卓弘(うえむら たかひろ) @Uemmra3 Ingressは青 •所属 Firefoxコミュニティ JAG中国~関西支部、つ部 CoderDojo、わんくま 鳥取県技術士会
"フォクすけ" (C) 2008 Mozilla Japan
![Page 4: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/4.jpg)
じこしょうかい2•鳥取県西部(西伯郡大山町)出身&在住 •米子東高校出身(@Matzの後輩)
•2014/3まで大阪住んでた •仕事は建設コンサルのサイト管理者&経営者
![Page 5: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/5.jpg)
大山町(だいせんちょう)
![Page 6: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/6.jpg)
大山町のグルメ
![Page 7: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/7.jpg)
•FirefoxOSの翻訳Adventarとかやってますじこしょうかい3
![Page 8: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/8.jpg)
•ここから本題
![Page 9: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/9.jpg)
•Gruntで出来てたことと出来てなかったこと
•gulpを使ってみて •まとめと抱負 •おまけ
![Page 10: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/10.jpg)
•Gruntで出来てたことと出来てなかったこと
•gulpを使ってみて •まとめと抱負 •おまけ
![Page 11: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/11.jpg)
•基本はホームページビルダー製の静的サイト (フレーム分割、PVカウンター)
•主な目的は新卒採用向けの情報提供
当社のサイト
![Page 12: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/12.jpg)
•採用ページ、社員ブログといったコンテンツを追加
•jQueryでカルーセルやタブページなどを追加 (デザインの統一性とかはない。。)
私のサイト更新内容
![Page 13: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/13.jpg)
•SublimeText2で手打ちコーディング
•デプロイ時には、htmlやjsを圧縮 (Grunt大活躍)
•ftpクライアントでアップ
サイト更新環境
![Page 14: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/14.jpg)
Gruntで出来てたこと
•htmlファイルとかの自動圧縮
![Page 15: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/15.jpg)
•ファイル監視 •なんかエラーが出続けてこける
Gruntで出来てなかったこと
(́;ω;`)
![Page 16: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/16.jpg)
•Gruntで出来てたことと出来てなかったこと
•gulpを使ってみて •まとめと抱負 •おまけ
![Page 17: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/17.jpg)
•とりあえず圧縮は出来た •ファイルサイズが少し異なるので追跡調査したい
•監視については…時間切れ(́;ω;`)
gulpを使ってみて
![Page 18: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/18.jpg)
•Gruntで出来てたことと出来てなかったこと
•gulpを使ってみて •まとめと抱負 •おまけ
![Page 19: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/19.jpg)
!
!
!
参考「ビルドツールまとめ。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の合計
![Page 20: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/20.jpg)
Grunt vs gulpの感想早さ 監視 書き易さ
Grunt やや重いお手上げ
(教えてほしい) 宣言的
gulpそれなりにサクサク
ちゃんとやれば出来るのかも? 手続き的
ひとこと ファイル数もそんな多くない
これを実現できるか?が選択のキーファクター
gulpの方がわかり易い
![Page 21: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/21.jpg)
• Broccoli.js(“.js”をつけるとクグラビリティがアップ!)
• 公式サイトの情報 !
気になるもの
![Page 22: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/22.jpg)
•Gruntで出来てたことと出来てなかったこと
•gulpを使ってみて •まとめと抱負 •おまけ
![Page 23: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/23.jpg)
おまけ:シェルTips1
•カーソル移動 •Ctrl+A Ctrl+E •esc, delete
![Page 24: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/24.jpg)
おまけ:シェルTips2
•ディレクトリ移動 •cd - •alias uuu='cd ../../../'
![Page 25: 2015.09.26 gulp使ってみた](https://reader030.vdocuments.mx/reader030/viewer/2022021420/5a687e2f7f8b9a177a8b52f1/html5/thumbnails/25.jpg)
おまけ:シェルTips3•バックグラウンド実行 •jobs fg bg •runcommand& •runcommand Ctrl+Z bg