現代化 Web 開發技術學習分享

PostCSS 是一套使用 JavaScript 轉換 CSS 的工具，有別於以往 Sass、Less 等預處理器將檔案編譯成 CSS，PostCSS 是針對 CSS 後續所作行為處理的後處理器，在某些情境也有可能為前處理器，透過載入並使用 Plugin 的方式來完成目的，常見的使用情境為 CSS Prefix、CSS Conpress 等等。此篇將結合 gulp-postcss 與 gulp-sass 來說明，途中也會補充常見的 PostCSS Plugin，像是 autoprefixer 和 cssnano。

Babel 是一款 JavaScript 的編譯器，你可能會有疑問，JavaScript 不是可以直接在 Browser 上運行嗎？為何還需要編譯？事實上 JavaScript 從發行到現在，經過了許多版本的更新，常見的 ES6、ES7 都屬於較新的版本，最為穩定的版本為 ES5，兼容性也是最高的， Babel 的用意就是將較新版本的 JavaScript 編譯成穩定版本，以提高兼容性。此篇將介紹如何透過 gulp-babel 這個套件編譯我們的 JavaScript，後面也會補充介紹 @babel/runtime 與 @babel/polyfill 組件的使用。

Pug 原來的名稱為 Jade，是一套 HTML 的模板語言，你可以把它想像成 CSS 與 SCSS 的關係，Pug 可以幫助開發者簡化語法和模組化開發，一樣需要透過編譯器使之編譯成 HTML 才能正常運行，這次我們會使用 gulp-pug 來完成我們的編譯動作，同時也會簡單介紹 Pug 的語法。

Sass/SCSS 是 CSS 的預處理器，擴充了既有 CSS 的語法、規則及功能，目前已經算是前端必備的工具，但 .sass/.scss 檔案是無法再 Browser 運行的，需要透過編譯器使之編譯成 CSS 檔案才能成功運行，這一次將介紹如何使用 gulp-sass 套件將 .sass/.scss 檔案編譯成 .css 檔案。

相信大多數人多少都有聽過 Gulp 這個工具，但卻沒有實際的去使用過它，Gulp 是一個自動化工具，基於串流(Stream)的方式來完成所設立的任務(Task)，擁有豐富的套件可供使用，可滿足前端開發者大部分的需求。此篇將介紹 Gulp 的環境要如何安裝以及建立第一個 Task，關於套件的部分將會獨立在做介紹。

在之前開發 Python 時，最常使用 for in 去遍歷物件；仔細想想，自己好像被 forEach 寵壞了，都忘記 JavaScript 也有相關的語法，實際使用下來，發現有部分觀念需要釐清，且某些情境可能不是這麼好用，需要搭配其他方法才能完成目的。此篇重點圍繞在 for、for/in、for/of、forEach 的使用情境與差別。

在之前我一直都是使用 float、position 來排版，但當網頁元素越來越多，相對的結構也會越來越複雜，且 float 還需要搭配 clearfix 來解決塌陷等麻煩問題；到了 CSS3 時代，推出了新型的 Flexbox 佈局模式，徹底改善傳統排版繁瑣等問題，就連 Bootstrap4 都引進了，好東西！不學嗎？

在大部分語言，第一次接觸到的陣列處理方法不外乎是 for、while 等等，但現代開發講求效率以及可讀性，當有其他判斷需求，整個處理的結構就會變得很複雜，這次來紀錄一下 ES6 新增的幾種陣列處理方法，包括 filter、map 等方法，在實戰中，可大幅的幫助開發，自己使用下來，效果顯卓！

在開發 Vue 項目時，需要利用 Props 與 Emit 使元件互相溝通，當時沒注意到物件有 Shallow Copy 與 Deep Copy 等特性，導致複製後的新物件影響原物件問題，特別深入學習此觀念。