iT邦幫忙

鐵人檔案

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

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

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

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

[試著把切版專案升級到 gulp4.0 吧] Day11 第一個插件:以清除暫存為例

在前端工程化的現在,實際放上遠端伺服器給使用者下載的網頁資料夾架構,其實並不等於開發者在本地端所開發的資料夾架構。因此,建構工具時常會臨時產生出一個 temp...

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

[試著把切版專案升級到 gulp4.0 吧] Day12 第一個插件:以清除暫存為例,談 gulp-clean、del 插件

最早我開始學 gulp 的刪除暫存時,引入的套件其實是 gulp-clean,引入該模組的方式是 npm install --save-dev gulp-cle...

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

[試著把切版專案升級到 gulp4.0 吧] Day13 第一個插件:以清除暫存為例,談 gullp 的插件黑名單

昨天提到,在 gulp 中使用清除檔案的插件時,我用的本來是 gulp clean,但現在換成了 npm 套件 del,這是因為重新 npm install 時...

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

[試著把切版專案升級到 gulp4.0 吧] Day14 HTML、EJS 的處理

終於要開始一個跟前端開發比較相關的 task 惹。在網頁開發早期,寫一個網頁只需要一個 HTML 檔案就好;但後來,有些人覺得 HTML 語法能提供的功能太少,...

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

[試著把切版專案升級到 gulp4.0 吧] Day15 HTML、EJS 的處理:談 HTML 樣板語言

在網頁開發領域發展的初期,前端和後端是沒分這麼開的。有些開發者直接把 HTML、CSS、JS 檔案放到後端語言裡頭(如 php);將這些檔案重新處理後,才傳給那...

2019-10-01 ‧ 由 ayugioh2003 分享
DAY 16

[試著把切版專案升級到 gulp4.0 吧] Day16 HTML、EJS 的處理:談 gulp-front-matter 與 gulp-layout

在前天的文章中曾展示了如何將 ejs 模板語言轉成 HTML 的 gulp 流水線程式碼,今天將介紹兩個大功臣套件:gulp-front-matter 與 gu...

2019-10-02 ‧ 由 ayugioh2003 分享
DAY 17

[試著把切版專案升級到 gulp4.0 吧] Day17 HTML、EJS 的處理:$ 是萬能的,談 gulp-load-plugins

在 Day14 中,曾經談過怎麼處理 EJS 模板,並轉成瀏覽器看得懂的 HTML。不過在 gulpfile.bable.js 檔中,竟然沒有 import 進...

2019-10-03 ‧ 由 ayugioh2003 分享
DAY 18

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

談完了 HTML 的處理,接下來要談 CSS 的處理了。在這個專案中,除了會用到 SCSS 來撰寫 CSS 外,也會另外引入 BS4 的 SCSS 來幫助切版。...

2019-10-04 ‧ 由 ayugioh2003 分享
DAY 19

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

gulp-sass 是 gulp 為了處理 sass/scss 檔而誕生的套件。然而,sass/scss 是什麼呢?SASS 的官網是這麼介紹 SASS 的:...

2019-10-05 ‧ 由 ayugioh2003 分享
DAY 20

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

昨天談完了將 SASS 轉成瀏覽器看得懂的 CSS,今天談的工具:gulp-postcss 與 autoprefixer,則能幫 CSS 兼容各個瀏覽器的私有前...

2019-10-06 ‧ 由 ayugioh2003 分享