邊開發邊看畫面變動：談 browserSync 前端開發時除了看程式碼外，當然也會想看到目前的界面長得怎樣以便調整：即時的畫面回饋，能讓開發更方便。而 brow...
邊開發邊看畫面變動：談 gulp.watch 想要達到邊開發邊看到畫面改動，有兩個比較重要的事情要做：一個是監控開發中的檔案是否有變動、另一個是建立一個暫時性的...
終於 30 天惹 ~ 不過內容其實還沒打完，但最近事情比較多，不太有時間繼續寫。之後可能就每天上來只貼代碼吧，等日後有空再回頭補文章整個檔案有放在 githu...
昨天提到，當需要將檔案放上生產環境時，才會需要壓縮檔案。那要怎樣控制什麼時候是生產環境呢？答案是透過 CLI 界面的指令。透過指令，將 env 設定成 prod...
就目前為止，開發前端需要的檔案轉換大致完成了：ejs->html、scss->css、ES6+->ES5、也順便壓縮了 CSS、JS、圖片檔的...
除了 CSS、JS 檔需要壓縮外，圖片因為體積較大，所以更是需要壓縮。圖片壓縮除了用修圖軟體降低畫質外，也可以靠一些線上服務來作到。而在 gulp、webpac...
當我們把 JS 從 ES6+ 語法轉碼成 ES5 後，雖然解決了舊瀏覽器看不懂新語法的需求，但卻還有一個基本需求尚未解決：可不可以把檔案變得更小呢？ 答案是可行...
昨天提到，為了減少 HTTP 請求次數，會把第三方套件的程式碼捆成一大包。今天則是要處理專案開發者自己寫的 JS 程式碼。 對於專案開發者自己的 JS 碼來說，...
在網頁開發的歷史早期，若要使用第三方套件/函式庫的話，常常會使用 <script src="函式庫網址"></script...
把 CSS 處理完後，終於輪到 JS 了。在這個專案中，index.html 有引入兩支 JS：verdor.js、all.js。其中，bundle.js 是用...
還記得我一開始學寫網頁的與 JS 的時候，就是在編輯器如 Sublime、VSCode 上把 HTML 與 JS 寫好，然後點擊 index.html 檔，看網...
隨著網頁技術不斷翻新，前端需要處理的事也就越來越繁雜；在 2016 年有一篇當時很紅的文章，詼諧的故事除了是技術名詞科普之外，同時也諷刺了前端技術的瘋狂增長，...
對於前端開發來說，除了要切版、開發功能外，也需要讓 client 端接收的檔案越小越好，這樣能降低網頁的讀取時間。這時候，就可以透過壓縮檔案來降低檔案體積。 在...
昨天談完了將 SASS 轉成瀏覽器看得懂的 CSS，今天談的工具：gulp-postcss 與 autoprefixer，則能幫 CSS 兼容各個瀏覽器的私有前...
gulp-sass 是 gulp 為了處理 sass/scss 檔而誕生的套件。然而，sass/scss 是什麼呢？SASS 的官網是這麼介紹 SASS 的：...
談完了 HTML 的處理，接下來要談 CSS 的處理了。在這個專案中，除了會用到 SCSS 來撰寫 CSS 外，也會另外引入 BS4 的 SCSS 來幫助切版。...
在 Day14 中，曾經談過怎麼處理 EJS 模板，並轉成瀏覽器看得懂的 HTML。不過在 gulpfile.bable.js 檔中，竟然沒有 import 進...
在前天的文章中曾展示了如何將 ejs 模板語言轉成 HTML 的 gulp 流水線程式碼，今天將介紹兩個大功臣套件：gulp-front-matter 與 gu...
在網頁開發領域發展的初期，前端和後端是沒分這麼開的。有些開發者直接把 HTML、CSS、JS 檔案放到後端語言裡頭（如 php）；將這些檔案重新處理後，才傳給那...
終於要開始一個跟前端開發比較相關的 task 惹。在網頁開發早期，寫一個網頁只需要一個 HTML 檔案就好；但後來，有些人覺得 HTML 語法能提供的功能太少，...
昨天提到，在 gulp 中使用清除檔案的插件時，我用的本來是 gulp clean，但現在換成了 npm 套件 del，這是因為重新 npm install 時...
最早我開始學 gulp 的刪除暫存時，引入的套件其實是 gulp-clean，引入該模組的方式是 npm install --save-dev gulp-cle...
在前端工程化的現在，實際放上遠端伺服器給使用者下載的網頁資料夾架構，其實並不等於開發者在本地端所開發的資料夾架構。因此，建構工具時常會臨時產生出一個 temp...
在「以複製檔案為例」系列的第一天，曾經貼過這個範例 task： import gulp from 'gulp' export function copyHTM...
Gulp 官方文件是這麼形容 globs 的： A glob is a string of literal and/or wildcard character...
在 gulp 3.9.1 的時候，有四個最常被使用的 gulp API，分別是 task()、src()、dest()、以及 watch()。其中，task()...
上個系列以 hello gulp 為例，示範了要怎麼在 gulp 中定義一個 task，並如何從 CLI 界面執行這些 task。這篇文將定義一個稍微實用一點的...
在 day4、day5 用到的 require、import 等語法，其實就是 JavaScript 內建的模組化寫法。但其實 JavaScript 被創始之初...
在 Gulp4 中，task() API 已經不被推薦，改成用 function 定義 task。使用 function 定義 task 有個好處，就是如果該...
gulp 作為一種前端的建構工具，用途當然就是用指令呼叫 task、以及將 task 自動化，因此在 gulp 內會設定很多 task。這篇文將建立一個簡單的...
ayugioh2003
Gary
iThome鐵人賽
看影片追技術