Gulp 很適合搭配任何其他的前後端結構，就先前介紹的幾個章節，只要略為修改輸入及輸出的路徑即可；除了搭配其他後端結構外，Gulp 也有適合直接開發的方法，本章...
利用 gulp 來進行前端開發、執行預先定義好的 task 時，如果過程中有例外錯誤產生，原本正在 watch 檔案的執行程式會被中止。 不過，只要使用了 gu...
今天的進度來做個小調整，讓大家在使用 Gulp 時就能相容於目前的環境，目前使用的主要套件有：gulp-sass、gulp-postcss，這次調整後會有一個主...
前言 上一篇我們透過 gulp-replace 與 gulp-hash 更改檔案名稱與引入程式名稱方法處理 cache 的問題，而在這一篇，提供利用多一層版本資...
前言 前面連續介紹 18篇有關 .NET Core 持續整合相關指令、gulp 件、IT架構與佈署流程介紹，在本篇文章，我們將彙整前面的文章，透過一個簡單的專案...
終於 30 天惹 ~ 不過內容其實還沒打完，但最近事情比較多，不太有時間繼續寫。之後可能就每天上來只貼代碼吧，等日後有空再回頭補文章整個檔案有放在 githu...
昨天提到，當需要將檔案放上生產環境時，才會需要壓縮檔案。那要怎樣控制什麼時候是生產環境呢？答案是透過 CLI 界面的指令。透過指令，將 env 設定成 prod...
Yo! 因為用Gulp包其他頁面，但最後一頁臨時改成用Tailwind，在設定上卡了一下...一起紀錄下。這篇的大綱 1.漸入的動態菜單 （還是要有動態提案！...
邊開發邊看畫面變動：如何一鍵預覽畫面、生成靜態檔案 在過去幾天，gulpfile 中已經建立了很多 gulp task 能供 cli 使用。像是 ejs tas...
除了 CSS、JS 檔需要壓縮外，圖片因為體積較大，所以更是需要壓縮。圖片壓縮除了用修圖軟體降低畫質外，也可以靠一些線上服務來作到。而在 gulp、webpac...
對於前端開發來說，除了要切版、開發功能外，也需要讓 client 端接收的檔案越小越好，這樣能降低網頁的讀取時間。這時候，就可以透過壓縮檔案來降低檔案體積。 在...
沒想到最後還是報名鐵人賽了呢（笑）。在寫程式遇到麻煩 google 時，找到的文章常常是從鐵人賽裡面出來的系列文，很是感激這個活動，產出了許多優質參考資料。 我...
Gulp 官方文件是這麼形容 globs 的： A glob is a string of literal and/or wildcard character...
插播一下， webpack 5 出來了 gulp 是個老牌的 task runner ，它就只是執行設定好的工作，設定寫起來其實不難，不過現在前端大家主要還...
最早我開始學 gulp 的刪除暫存時，引入的套件其實是 gulp-clean，引入該模組的方式是 npm install --save-dev gulp-cle...
上個系列以 hello gulp 為例，示範了要怎麼在 gulp 中定義一個 task，並如何從 CLI 界面執行這些 task。這篇文將定義一個稍微實用一點的...
終於要開始一個跟前端開發比較相關的 task 惹。在網頁開發早期，寫一個網頁只需要一個 HTML 檔案就好；但後來，有些人覺得 HTML 語法能提供的功能太少，...
在 Day1 的文章曾提到，gulp 作為一種建構工具，是用來幫助前端開發過程的建構自動化。那究竟，前端工程化後，對網頁開發產生了什麼影響呢？我們可以先回到沒有...
在 Day14 中，曾經談過怎麼處理 EJS 模板，並轉成瀏覽器看得懂的 HTML。不過在 gulpfile.bable.js 檔中，竟然沒有 import 進...
昨天提到，為了減少 HTTP 請求次數，會把第三方套件的程式碼捆成一大包。今天則是要處理專案開發者自己寫的 JS 程式碼。 對於專案開發者自己的 JS 碼來說，...
gulp-sass 是 gulp 為了處理 sass/scss 檔而誕生的套件。然而，sass/scss 是什麼呢？SASS 的官網是這麼介紹 SASS 的：...
昨天談完了將 SASS 轉成瀏覽器看得懂的 CSS，今天談的工具：gulp-postcss 與 autoprefixer，則能幫 CSS 兼容各個瀏覽器的私有前...
gulp 作為一種前端的建構工具，用途當然就是用指令呼叫 task、以及將 task 自動化，因此在 gulp 內會設定很多 task。這篇文將建立一個簡單的...
要講到 gulp 怎麼運作的就不得不講到 vinyl 跟 Node.js 的 stream vinyl vinyl 是 gulp 用的虛擬的檔案格式，在它的 r...
這裡要來介紹如何優化 css 有時候我們因為要加前綴詞(有的舊瀏覽器不支援，所以需要加) 但這會浪費我們大量的時間在查詢資料 為了省時 我們可以加入 gulp-...
談完了 HTML 的處理，接下來要談 CSS 的處理了。在這個專案中，除了會用到 SCSS 來撰寫 CSS 外，也會另外引入 BS4 的 SCSS 來幫助切版。...
把 CSS 處理完後，終於輪到 JS 了。在這個專案中，index.html 有引入兩支 JS：verdor.js、all.js。其中，bundle.js 是用...
就目前為止，開發前端需要的檔案轉換大致完成了：ejs->html、scss->css、ES6+->ES5、也順便壓縮了 CSS、JS、圖片檔的...
在網頁開發的歷史早期，若要使用第三方套件/函式庫的話，常常會使用 <script src="函式庫網址"></script...
今天要來介紹 gulp-sass 如何安裝與使用 gulp-sass 介紹https://www.npmjs.com/package/gulp-sass 安裝:...
卡斯伯
ayugioh2003
Duran Hsieh
Global Rachel
DanSnow
iThome鐵人賽
看影片追技術