前端技術進展快速名不虛傳，真有感的就是看 Web Developer RoadMap，學習路徑上的每個節點，如同枝葉日漸繁茂，同時許多技術由還來不及學習就由醒目的亮黃色轉為枯灰，最終凋零消失於 RoadMap上。
學習 Gulp 的起因是 Webpack，在完成 Udemy 的課程後，開始實踐打造自己的 Starter Template，試圖讓日後的工作流程能夠有個快速的架手腳工具，並享受 NPM moduels, Sass, Babel, ES6, Html Template, Minify Files 等便捷的前端開發功能。
此時的自己也剛上完 Vue.js 的課程，當時稍微研究過 Webpack + NPM Scripts 直覺就是兩者是渾然天成的組合，不需要另外費神去研究其他的 Task Runner，諸如 Grunt 及 Gulp。但就在學習過程中，一次偶然下載的 Template 專案是以 Gulp 作為 Task Runner，嘗試閱讀之下，竟然發現 Gulp語法十分平易近人。
短時間內滿滿的前端工具衝擊著自己，讓自己應接不暇，而在冷靜思考自己真正的需要其實不是規模化專案開發及 SPA 的前端框架，反而只是 Gulp 與其 Plugins 就可以滿足我工作及日常所需，於是暫且拋下 Webpack, Vue.js，開始認真學習 Gulp，也在學習 Gulp 的過程中順道學習了 Hexo (前端的學習真的很容易發散，需要不斷的重新聚焦)，以下就是學習過程的筆記。
學習過程中發現，學習 Gulp 最舒適的方式就是先知道自己到底為什麼需要這個工具？先羅列出 Gulp 可以幫自己解決的痛點，接著主動搜尋是否存在對應的 Gulp-Plugins，找到之後再將 Gulp Task 加入到自己的 gulpfile.js ，接著驗證功能是否符合預期。
| 需要的功能 | 對應的 Gulp-Plugin | 驗證 |
|---|---|---|
| 清空資料夾 | del | ✔️ |
| 壓縮 CSS | gulp-clean-css | ✔️ |
| 壓縮 JS | gulp-uglify | ✔️ |
| 重新命名 .min | gulp-rename | ✔️ |
| 支援 SCSS | gulp-sass | ✔️ |
| 轉譯 ES6 | gulp-babel | ✔️ |
| 使用 Pug | gulp-pug | ✔️ |
| Html 載入路徑 | gulp-html-replace | ✔️ |
| 選取 vendor css/js | dest | ✔️ |
| 加上版本號 .js?v=1 | gulp-version-number | ✔️ |
| 開發模式/生產模式 | minimist / gulp-if | ✔️ |
| Html Template | ejs | ✔️ |
| 支援 PostCSS Autoprefix | gulp-postcss | |
| 壓縮圖片 | gulp-imagemin | |
| Html Extends | handlebars |
參考資料
試著把切版專案升級到 gulp4.0 吧
https://awdr74100.github.io/categories/Gulp/
https://hsiangfeng.github.io/categories/gulp/