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
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
130
PipeCDのプラグイン化で目指すところ
warashi
1
270
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
How STYLIGHT went responsive
nonsquared
100
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The Invisible Side of Design
smashingmag
301
51k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Documentation Writing (for coders)
carmenintech
72
4.9k
Unsuck your backbone
ammeep
671
58k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Designing for Performance
lara
610
69k
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