Gulp 學習筆記

2020-04-27

前端技術進展快速名不虛傳，真有感的就是看 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 ，接著驗證功能是否符合預期。

參考資料

試著把切版專案升級到 gulp4.0 吧
https://awdr74100.github.io/categories/Gulp/
https://hsiangfeng.github.io/categories/gulp/