一氣喝成！Gulp！ @ 桃園前端開發者大會 2014-6

前端任務自動Build起來！
近來崛起的Gulp在開發人員是個超級新星，其最大的特色是架構簡潔、編寫容易、高易讀性、高維護性，當然擴充套件生態圈也日益壯大！

Transcript

1. ⼀一氣喝成！ Gulp
2. Profile ❖ 卓⼩小狂! ❖ Front-End Engineer! ❖ 曾任職美商公司、︑遊戲公司! ❖ 曾參與創業團隊和新創公司! ❖ ⽬目前專注於開源專案的開發
3. 關於前端.. 建⽴立專案 HTML CSS JavaScript Unit Test Prototyping 相容性測試 瀏覽器測試 非同步測試 切圖 管理資源 UI設計 UX設計 ⾏行動裝置測試 RWD Preprocessor Minify Concatenation Performance調校 DOM結構優化 切割⼯工作Task 撰寫User Story Debug 和後端溝通 和設計溝通 和PM溝通 和客⼾戶吵架 微調⼯工作 需求訪問 架構設計 流程規劃 管理專案 無⽌止盡修改 版本控管 持續整合 重構程式碼 不斷學習 克服問題
4. 情境 前端的⼯工作這麼繁瑣
5. 情境 該如何提昇開發效率？
6. SOLUTION !
7. ⼀一氣喝成！ Gulp
8. A Streaming Build System
9. 把你的前端⼯工作流程⾃自動化
10. $ npm install -g gulp
11. Gulp可以.. ❖ Sass compiler / 編譯Sass檔! ❖ Autoprefixer / 解決瀏覽器相容! ❖ Minify CSS / 壓縮CSS檔! ❖ Imagemin / 壓縮圖⽚片! ❖ JSHint / 檢查Javascript撰寫風格! ❖ Concatenation / 合併Javascript檔案! ❖ Uglify / 優化Javascript
12. Gulp還可以.. ❖ BrowserSync / ⾃自動重整瀏覽器! ❖ Notify / 執⾏行Task時可以發送訊息通知你! ❖ Jasmine, Mocha, Qunit / 常⽤用的測試框架都有⽀支援! ❖ Git / 版控也能⾃自動化! ❖ Bower / 置入專案需要⽤用到的Library
13. 如果你不想寫JavaScript.. http://gulpfiction.divshot.io/
14. 如果你是⽤用SublimeText.. Sublime-Gulp
15. 如果你是⽤用Mac.. Gulp.app
16. 當然你還有別的選擇.. Gulp DevTool
17. Fork https://github.com/gulpjs