iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

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

現代前端與過去網頁開發最大的改變之一,就是前端工程化:像是追求一鍵完成圖片壓縮、開發中監控檔案改變並自動更新頁面…等自動化流程。而 gulp 在前端工程化的潮流中也(曾)扮演著重要角色。本系列文將嘗試把筆者過去的切版專案更新至 gulp 4.0,以便梳理過去對 gulp 的理解不足之處、與瞭解 gulp 4.0 的改變。

鐵人鍊成 | 共 36 篇文章 | 48 人訂閱 訂閱系列文 RSS系列文
DAY 21

[試著把切版專案升級到 gulp4.0 吧] Day21 CSS 的處理:談壓縮 CSS 與 gulp-clean-css

對於前端開發來說,除了要切版、開發功能外,也需要讓 client 端接收的檔案越小越好,這樣能降低網頁的讀取時間。這時候,就可以透過壓縮檔案來降低檔案體積。 在...

2019-10-07 ‧ 由 ayugioh2003 分享
DAY 22

[試著把切版專案升級到 gulp4.0 吧] Day22 CSS 的處理:談 sourcemap 與 gulp-sourcemaps

還記得我一開始學寫網頁的與 JS 的時候,就是在編輯器如 Sublime、VSCode 上把 HTML 與 JS 寫好,然後點擊 index.html 檔,看網...

2019-10-08 ‧ 由 ayugioh2003 分享
DAY 23

[試著把切版專案升級到 gulp4.0 吧] Day23 JS 的處理

把 CSS 處理完後,終於輪到 JS 了。在這個專案中,index.html 有引入兩支 JS:verdor.js、all.js。其中,bundle.js 是用...

2019-10-09 ‧ 由 ayugioh2003 分享
DAY 24

[試著把切版專案升級到 gulp4.0 吧] Day24 JS 的處理:談 gulp-concat

在網頁開發的歷史早期,若要使用第三方套件/函式庫的話,常常會使用 <script src="函式庫網址"></script...

2019-10-10 ‧ 由 ayugioh2003 分享
DAY 25

[試著把切版專案升級到 gulp4.0 吧] Day25 JS 的處理:談 gulp-babel

昨天提到,為了減少 HTTP 請求次數,會把第三方套件的程式碼捆成一大包。今天則是要處理專案開發者自己寫的 JS 程式碼。 對於專案開發者自己的 JS 碼來說,...

2019-10-11 ‧ 由 ayugioh2003 分享
DAY 26

[試著把切版專案升級到 gulp4.0 吧] Day26 JS 的處理:談 gulp-uglify

當我們把 JS 從 ES6+ 語法轉碼成 ES5 後,雖然解決了舊瀏覽器看不懂新語法的需求,但卻還有一個基本需求尚未解決:可不可以把檔案變得更小呢? 答案是可行...

2019-10-12 ‧ 由 ayugioh2003 分享
DAY 27

[試著把切版專案升級到 gulp4.0 吧] Day27 圖片壓縮處理:談 gulp-imagemin

除了 CSS、JS 檔需要壓縮外,圖片因為體積較大,所以更是需要壓縮。圖片壓縮除了用修圖軟體降低畫質外,也可以靠一些線上服務來作到。而在 gulp、webpac...

2019-10-13 ‧ 由 ayugioh2003 分享
DAY 28

[試著把切版專案升級到 gulp4.0 吧] Day28 在生產環境時才壓縮檔案

就目前為止,開發前端需要的檔案轉換大致完成了:ejs->html、scss->css、ES6+->ES5、也順便壓縮了 CSS、JS、圖片檔的...

2019-10-14 ‧ 由 ayugioh2003 分享
DAY 29

[試著把切版專案升級到 gulp4.0 吧] Day29 在生產環境時才壓縮檔案:談 minimist、gulp-if

昨天提到,當需要將檔案放上生產環境時,才會需要壓縮檔案。那要怎樣控制什麼時候是生產環境呢?答案是透過 CLI 界面的指令。透過指令,將 env 設定成 prod...

2019-10-15 ‧ 由 ayugioh2003 分享
DAY 30

[試著把切版專案升級到 gulp4.0 吧] Day30 邊開發邊看畫面變動

終於 30 天惹 ~ 不過內容其實還沒打完,但最近事情比較多,不太有時間繼續寫。之後可能就每天上來只貼代碼吧,等日後有空再回頭補文章整個檔案有放在 githu...

2019-10-16 ‧ 由 ayugioh2003 分享