第十一屆 佳作

web
試著把切版專案升級到 gulp4.0 吧
ayugioh2003

系列文章

DAY 1

[試著把切版專案升級到 gulp4.0 吧] Day01 前言:參賽目的

沒想到最後還是報名鐵人賽了呢(笑)。在寫程式遇到麻煩 google 時,找到的文章常常是從鐵人賽裡面出來的系列文,很是感激這個活動,產出了許多優質參考資料。 我...

DAY 2

[試著把切版專案升級到 gulp4.0 吧] Day02 Gulp 在前端工程化中的角色

在 Day1 的文章曾提到,gulp 作為一種建構工具,是用來幫助前端開發過程的建構自動化。那究竟,前端工程化後,對網頁開發產生了什麼影響呢?我們可以先回到沒有...

DAY 3

[試著把切版專案升級到 gulp4.0 吧] Day03 Gulp4 環境配置

正如 Day2 提到的,這個系列文我想要記錄,將先前的切版專案從 gulp 3.9.1 升級到 gulp 4 的過程。因此在正式建構 gulp 4 環境前,先來...

DAY 4

[試著把切版專案升級到 gulp4.0 吧] Day04 來自 gulp 的 hello world:gulp 3.9.1 寫法

gulp 作為一種前端的建構工具,用途當然就是用指令呼叫 task、以及將 task 自動化,因此在 gulp 內會設定很多 task。這篇文將建立一個簡單的...

DAY 5

[試著把切版專案升級到 gulp4.0 吧] Day05 來自 gulp 的 hello world:gulp4 寫法

在 Gulp4 中,task() API 已經不被推薦,改成用 function 定義 task。使用 function 定義 task 有個好處,就是如果該...

DAY 6

[試著把切版專案升級到 gulp4.0 吧] Day06 來自 gulp 的 hello world:JavaScript 模組化方案

在 day4、day5 用到的 require、import 等語法,其實就是 JavaScript 內建的模組化寫法。但其實 JavaScript 被創始之初...

DAY 7

[試著把切版專案升級到 gulp4.0 吧] Day07 第一個 task:以複製檔案為例

上個系列以 hello gulp 為例,示範了要怎麼在 gulp 中定義一個 task,並如何從 CLI 界面執行這些 task。這篇文將定義一個稍微實用一點的...

DAY 8

[試著把切版專案升級到 gulp4.0 吧] Day08 第一個 task:以複製檔案為例,談 task、src、dest、watch API

在 gulp 3.9.1 的時候,有四個最常被使用的 gulp API,分別是 task()、src()、dest()、以及 watch()。其中,task()...

DAY 9

[試著把切版專案升級到 gulp4.0 吧] Day09 第一個插件:以複製檔案為例,談路徑表示方式 globs

Gulp 官方文件是這麼形容 globs 的: A glob is a string of literal and/or wildcard character...

DAY 10

[試著把切版專案升級到 gulp4.0 吧] Day10 第一個插件:以複製檔案為例,談 node.js 的 stream 與 pipe()

在「以複製檔案為例」系列的第一天,曾經貼過這個範例 task: import gulp from 'gulp' export function copyHTM...