[試著把切版專案升級到 gulp4.0 吧] Day02 Gulp 在前端工程化中的角色

第 11 屆 iThome 鐵人賽

DAY 2

Modern Web

試著把切版專案升級到 gulp4.0 吧系列第 2 篇

11th鐵人賽 gulp

ayugioh2003

2019-09-18 23:10:34

1691 瀏覽

分享至

在 Day1 的文章曾提到，gulp 作為一種建構工具，是用來幫助前端開發過程的建構自動化。那究竟，前端工程化後，對網頁開發產生了什麼影響呢？我們可以先回到沒有前端建構工具的那段時光來窺探一二。

早期的網頁開發狀況

如今，我們最常使用的一種網路服務，全球資訊網（world wide web），是在 1989 年被 Tim Berners-Lee 發明的。同年間，用 HTML 語法來表示網頁內容的構想也被提出。1995 年，Brendan Eich 被 Netscape 招募，開發出 JavaScript 腳本語言，用來操控網頁上的元素。1994 年，CSS 的概念被挪威人 Håkon Wium Lie 提出。在 1996、97 年間，CSS 有了第一版的規範、W3C 也組織了 CSS 工作群組；但因為當時瀏覽器市場競爭激烈，CSS 語法規範並沒有被良好支援。2003 年，加拿大網頁設計師 Dave Shea 發佈網站 CSS ZEN GRADEN（禪意花園），呼籲 CSS 對網頁開發的重要性。

直至今日，網頁開發仍圍繞在這三種語言：HTML、CSS、JavaScript。但今日網頁開發的複雜程度已不可與當日相比了。

自從 JavaScript 在 1995 年被發明出來後，各家瀏覽器廠商（Netscape、IE、Firefox、Chrome、Safari…）、與制定 ECMAScript 規範的 ECMA TC39 組織就不斷地替 JavaScript 添加新的功能，讓它變得更加強大。像是在 2004 年，Google 開發出讓使用者能順暢地、不用換頁收信的 gmail，使用到了 IE 在 1999 年提出的 XMLHttpRequest 這隻 web API。

隨著網頁應用變得複雜，如何更有效管理 JavaScript 程式碼變成了重要的議題。2006 年，jQuery、MooTools 等 library 被提出，開發者們可以用更少的程式碼來獲取元素的 id、發出 Ajax 請求，藉此提昇開發效率。

此外，也開始有人思考，讓 JavaScript 擁有自己的模組系統，使網頁開發者能方便取用各種現成的第三方模組。可能會在 Day6 提到的 AMD 規範，就是一個試圖讓 JavaScript 能在瀏覽器環境下也能有模組系統。不過，這些現況在 Node.js 出現後，有了極大的變化。

由 node.js 發起的前端工程化生態

在 2008 年，原本主要業務是網頁搜尋的 Google，也開始踏足網頁瀏覽器領域，釋出 Chrome 這個瀏覽器。此外，還釋出能直譯 JavaScript 的 V8 引擎，效能比當時檯面上許多瀏覽器內的 JavaScript 引擎還要好。2009 年，Node.js 就應運而生了。

Node.js 的誕生，讓 JavaScript 不再只是跑在瀏覽器上的腳本語言，而是能跑在本地端的程式語言，就像 Python、Ruby 這些語言一樣。JavaScript 自此被添加了許多的外掛上身。

2010 年，npm（node package manager）發布，讓 JavaScript 套件有了可發布、下載、管理的平台。2011、2012 年間，browserify、webpack 等模組打包工具誕生，能夠讓瀏覽器端的 JavaScript 看懂原先只有 Node.js 才能使用的 require() 語法，讓在瀏覽器的 JavaScript 也有了模組化、依賴的功能。2012、2013 年間，gurnt、gulp 與 npm script 等工作執行工具誕生，開發者自此可以更方便地制定前端建構工作、並將工作依序或同時執行，讓前端開發的建構流程自動化。

在前端工程化的早期，gulp 曾是最主流的建構工具。但時至今日，網頁應用越來越複雜（如 angular、react、vue），前端開發的額外需求越來越多，gulp 已不再能輕鬆的勝任這些任務。在近日取而代之的主流，是用 webpack 當打包工具，搭配 npm script 下語法來執行工作。