Day 96 (Week14), 2021/07/16 (Friday)
學習時數：8 hr
Done
- [done] [FE201] Gulp、Webpack（剩下 2 個）
To Do @ this week
- [done] hw1 陽春部落格
- [ ] hw2 留言版 plugin
- [done] hw3 改寫第八週 Twitch 作業
學習心得紀錄
Objective 客觀
Gulp
Gulp 是管理任務的軟體，任務像是將 sass 編譯成 CSS 檔案，或是將檔案 size 最小化的 uglify、檔案重新命名（rename）為最小化後的檔案名稱與原檔案區別，有了這個管理任務的 Gulp，我就不用一個一個編譯，可以到最後 production 的時候，可以利用執行 Gulp 再進行編譯、縮小檔案大小等等的任務，會便捷許多。執行 Gulp 時，可以選擇要依照順序執行的 series 還是同時進行的 parallel。
昨天只學到了 Gulp 的基本用法，今天又增加了 Gulp 的一些 plugin，學了滿多的 plugin，如 gulp-rename'、gulp-babel、gulp-uglify。
但是現代前端工具要做的事情很多，不適合使用 Gulp 來管理任務，Gulp 只適合小網站的專案。
Webpack
為何需要 Webpack？因為想要將完成的軟體分享給他人使用，在 node.js 上可以使用 require 及 export 來引入籍輸出模組，但是在瀏覽器上沒有辦法像在 node.js 使用模組，例如： require 的語法，大都是使用 <script> 的語法來引用，所以就產生一些規範，如 commonJS 規範瀏覽器上的分享。
webpack 將 modules 與 webpack 綁在一起，這樣瀏覽器就可以使用 modules。先前提到的 modules 可以是自己打包的 code，在 webpack 也可以打包 npm 的 code，例如 jQuery 可以利用 webpack 打包來使用。還可以像 CSS loaders 一樣載入 CSS 檔案，甚至是使用 style loaders 來套用 CSS 樣式。
Webpack 在做資源的引入，也可以在資源引入前做一些轉換，例如將 Sass compile 成 CSS 再引入，或者是將最新的 ES6 語法，轉換成舊瀏覽器也能使用的舊語法，再引入資源。
感受
現在練習的都是小網站，還感受不到管理工具的威力，不過以前在練習寫分批下載大量圖片時，就深深感受到 code 的厲害，要是沒有寫 code 來下載大量圖片，那會手動下載圖片載到天荒地老。
跟著實戰練習寫一遍，發現有幾個需要注意的地方就是儲存資料的來源及目標路徑，還有預設會存成什麼檔名，怎麼更改設定檔（webpack.config.js），怎麼看懂跟使用官方網站上工具的教學，這些前端現代工具使用的原因及可以做些什麼。
這次下載了很多 npm 套件後，對於下載 npm 套件及 npm init 更熟悉。
Decisional 決定行動
希望明天可以進展到留言板 plugin！
