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