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

Gulp 4 已經推出有一段時間了，有礙於網上文章大多都是使用 Gulp 3 版本，對於學習 Gulp 4 的開發者來說較為不友善，此篇將完整解說 Gulp 3 與 Gulp 4 的差異，包含 Gulp 4 新增的幾個好用語法，比如 gulp.series()、gulp.parallel() 等等，以及 task() API 已不被官方推薦使用，取而代之的 function task 究竟如何使用，全部內容都將完整說明。

CommonJS 為當初最早設計用來解決 JavaScript 模組化設計的規範，使用簡單的幾個語法，即可達到模組化的效果。本篇不會探討較新標準的其他規範，比如 ES6 Module 等等，將會把焦點放在如何以 CommonJS 規範針對 Gulp 進行模組化設計，以及 CommonJS 規範中最常被人拿來討論的 module.exports 與 exports 語法兩者差別。

Bootstrap 目前已經算是前端必備的技能了，相信大部分人在使用時都是以 CDN 的方式進行載入，但這樣子的作法等同於將整個官方預編譯好的 Bootstrap 進行載入，當我們需要客製化 Bootstrap 樣式時，必定得採取其他方法。此篇將介紹如何使用 npm 方式載入 Bootstrap，並透過 Gulp 編譯屬於我們自己的客製化樣式。

上一次介紹了 Minimist 這個套件以區分生產環境與開發環境的處理流程，通常在一般開發中，我們會針對生產環境與開發環境所釋出的檔案個別命名以方便辨認，但在 Gulp 中預設是無法進行重命名操作的，Stream 的起始文件名稱為何，導出時名稱就為何。此篇將介紹如何使用 gulp rename 套件針對 Gulp 中的 Stream 檔案進行重命名動作。

通常在開發項目時，我們會分所謂的 development(開發環境) 與 production(生產環境)；常見的壓縮代碼流程就屬於 production 環境，你不會想再 development 環境壓縮代碼的，全部代碼都擠在一起，除起錯來相當困難。此篇將介紹如何使用 Minimist 命令行參數解析工具區分 Gulp 套件在 development 與 production 環境下的使用。

上一次介紹完了代碼該如何壓縮，這一次我們來介紹該如何壓縮圖片，事實上，影響網頁載入速度最重要的關鍵就在於圖片，無論你的代碼優化的多麼完美，只要一張 size 較大的圖片存在於網頁上，就有可能造成渲染速度的低落，我們所要做的就是將這些圖片進行壓縮，盡可能的減少檔案大小，達到最佳化的目的。此篇將介紹如何使用 gulp-imagemin 套件進行圖片壓縮等應用。

在正式上線的網站中，壓縮代碼已經算是不可或缺的一個流程，具有節省空間和提高網頁整體效能等效益，這次來介紹如何使用 gulp-htmlmin、gulp-clean-css、gulp-uglify 三個套件幫助我們壓縮代碼。後面也會補充 gulp-uglify 無法處理 ES6+ 版本代碼，該如何解決等內容。

Gulp 主要用來幫助我們使前端的一切建構動作都能夠自動化，但你會發現先前的套件範例並不是這麼的自動化，主要缺點為當我們執行編譯時，都必須刪除之前編譯產生的內容，以確保最新編譯結果不互相干擾，這有違自動化的用意。此篇將介紹使用 del 套件在編譯開始前刪除上一次的編譯結果，達到完全自動化目的。

在開發 Web 應用時，我們很常針對瀏覽器執行重新整理的指令，以便查看最新修改過後結果，從專案開始到結束，我們可能按了無數次的 F5，造成效率的低落，這時我們就可以使用 BrowserSync 這款工具，BrowserSync 能讓瀏覽器實現、快速響應你的文件修改(HTML、JavaScript、CSS、Sass、Less)並自動刷新頁面，啟動時會在本地端開啟一個虛擬伺服器，這也代表了不同裝置間能夠依靠伺服器位址同步更新並觀看頁面，無論你是前端還是後端工程師，都非常建議使用這款工具。

前端發展越來越複雜，各種預處理器的使用，導致實際運行代碼不同於開發代碼，除錯(debug)變得困難重重，常見的例子為 Sass/SCSS、CoffeeScript 等預處理器，通常代碼出錯時，編譯器只會告訴你第幾行第幾列出現錯誤，但這對於編譯後的代碼是毫無作用的，我們需要得知的是尚未編譯代碼片段的錯誤，並不是以編譯代碼片段的錯誤。此篇將利用 gulp-sourcemaps 套件生成 SourceMap 文件改善此問題。