Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
一氣喝成!Gulp! @ 桃園前端開發者大會 2014-6
Search
Aaron Chuo
August 16, 2014
Programming
1
110
一氣喝成!Gulp! @ 桃園前端開發者大會 2014-6
前端任務自動Build起來!
近來崛起的Gulp在開發人員是個超級新星,其最大的特色是架構簡潔、編寫容易、高易讀性、高維護性,當然擴充套件生態圈也日益壯大!
Aaron Chuo
August 16, 2014
Tweet
Share
More Decks by Aaron Chuo
See All by Aaron Chuo
擊殺!前端測試Boss全攻略! @ JSDC 2017
aaronchuo
0
270
Snapshot Everything @ Modern Web 2017
aaronchuo
0
64
前端團隊奴的日常 @ 高雄前端開發者大會
aaronchuo
0
88
熊大與喬巴的Workshop成果分享 @ 桃園前端開發者大會 2014-8
aaronchuo
0
110
熊大與喬巴的CSS3 Workshop教材 @ 中原大學
aaronchuo
1
89
CSS3 Workshop @ 桃園前端開發者大會閃電秀
aaronchuo
0
77
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
130
RailsGirls IZUMO スポンサーLT
16bitidol
0
180
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
95
6.1k
Raft: Consensus for Rubyists
vanstee
140
7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
For a Future-Friendly Web
brad_frost
179
9.8k
Site-Speed That Sticks
csswizardry
10
690
Building Applications with DynamoDB
mza
95
6.5k
Balancing Empowerment & Direction
lara
1
430
Visualization
eitanlees
146
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Done Done
chrislema
184
16k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
⼀一氣喝成! Gulp
Profile ❖ 卓⼩小狂! ❖ Front-End Engineer! ❖ 曾任職美商公司、︑遊戲公司! ❖ 曾參與創業團隊和新創公司!
❖ ⽬目前專注於開源專案的開發
關於前端.. 建⽴立專案 HTML CSS JavaScript Unit Test Prototyping 相容性測試 瀏覽器測試
非同步測試 切圖 管理資源 UI設計 UX設計 ⾏行動裝置測試 RWD Preprocessor Minify Concatenation Performance調校 DOM結構優化 切割⼯工作Task 撰寫User Story Debug 和後端溝通 和設計溝通 和PM溝通 和客⼾戶吵架 微調⼯工作 需求訪問 架構設計 流程規劃 管理專案 無⽌止盡修改 版本控管 持續整合 重構程式碼 不斷學習 克服問題
情境 前端的⼯工作這麼繁瑣
情境 該如何提昇開發效率?
SOLUTION !
⼀一氣喝成! Gulp
A Streaming Build System
把你的前端⼯工作流程⾃自動化
$ npm install -g gulp
Gulp可以.. ❖ Sass compiler / 編譯Sass檔! ❖ Autoprefixer / 解決瀏覽器相容!
❖ Minify CSS / 壓縮CSS檔! ❖ Imagemin / 壓縮圖⽚片! ❖ JSHint / 檢查Javascript撰寫風格! ❖ Concatenation / 合併Javascript檔案! ❖ Uglify / 優化Javascript
Gulp還可以.. ❖ BrowserSync / ⾃自動重整瀏覽器! ❖ Notify / 執⾏行Task時可以發送訊息通知你! ❖
Jasmine, Mocha, Qunit / 常⽤用的測試框架都有⽀支援! ❖ Git / 版控也能⾃自動化! ❖ Bower / 置入專案需要⽤用到的Library
如果你不想寫JavaScript.. http://gulpfiction.divshot.io/
如果你是⽤用SublimeText.. Sublime-Gulp
如果你是⽤用Mac.. Gulp.app
當然你還有別的選擇.. Gulp DevTool
Fork https://github.com/gulpjs