iT邦幫忙

gulp相關文章
共有 61 則文章
鐵人賽 Modern Web DAY 28
前端建置工具完全手冊 系列 第 28

技術 Day 28: gulp 是怎麼運作的

要講到 gulp 怎麼運作的就不得不講到 vinyl 跟 Node.js 的 stream vinyl vinyl 是 gulp 用的虛擬的檔案格式,在它的 r...

鐵人賽 Modern Web DAY 27
前端建置工具完全手冊 系列 第 27

技術 Day 27 介紹 gulp

插播一下, webpack 5 出來了 gulp 是個老牌的 task runner ,它就只是執行設定好的工作,設定寫起來其實不難,不過現在前端大家主要還...

徵才 【台北市】前端工程師(近捷運松江南京站)-APO

**我們需要您具備以下能力: 1、從事前端開發2年及以上,熟悉各種前端技術,包括HTML/CSS/JavaScript/Node.JS等 2、具備跨終端的前端開...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] DAY 36 完賽心得

雖然在 2019.12.26 的時候就三十天完賽了,還不小心撿到個人組佳作,但我沒有什麼完賽的實感,因為覺得當時系列文還沒寫完。今天總算是勉強補完了 orz 這...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day35 佈署靜態網頁到 github pages

當網頁已經開發完成了,通常會想找個網路空間把網頁放上去,讓其他人輸入網址後就能在遠方看到網頁。網路雖然是自由的,但卻不是免費的,許多的網路空間都需要花錢錢才能使...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day34 邊開發邊看畫面變動:談 gulp-plumber

利用 gulp 來進行前端開發、執行預先定義好的 task 時,如果過程中有例外錯誤產生,原本正在 watch 檔案的執行程式會被中止。 不過,只要使用了 gu...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day33 邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案

邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案 在過去幾天,gulpfile 中已經建立了很多 gulp task 能供 cli 使用。像是 ejs tas...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day32 邊開發邊看畫面變動:談 browserSync

邊開發邊看畫面變動:談 browserSync 前端開發時除了看程式碼外,當然也會想看到目前的界面長得怎樣以便調整:即時的畫面回饋,能讓開發更方便。而 brow...

鐵人賽 Modern Web

技術 [試著把切版專案升級到 gulp4.0 吧] Day31 邊開發邊看畫面變動:談 gulp.watch

邊開發邊看畫面變動:談 gulp.watch 想要達到邊開發邊看到畫面改動,有兩個比較重要的事情要做:一個是監控開發中的檔案是否有變動、另一個是建立一個暫時性的...

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

技術 21. [FE] 用過 Webpack 之類的打包工具嗎?為什麼需要?

隨著網頁技術不斷翻新,前端需要處理的事也就越來越繁雜;在 2016 年有一篇當時很紅的文章,詼諧的故事除了是技術名詞科普之外,同時也諷刺了前端技術的瘋狂增長,...

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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