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

這是文章中舉例的專案、Demo 頁

• ayugioh2003/Sweataste-gulp4.0
• 六角甜點工坊 - 首頁

數據

因為 gulp 有些 API 是奠基於 Node.js 的 API，就花了一點時間了解 Node.js。後來我就想說，順便來處理一下我在鐵人賽文章的數據好了 (不含這篇)

// count.js
const fs = require('fs')

const path = './z_articles' // 放文章的路徑，35 篇 MD 檔
const reg = /\s+|#|\(|\)|\`|\*/g
let arr = []

let files = fs.readdirSync(path)
files.forEach( fileName => {
  var file = fs.readFileSync('./z_articles/' + fileName, 'utf8')
  arr.push(file.toString().replace(reg, "").length)
})

for (let i=0; i<arr.length; i++) {
  console.log(arr[i], files[i])
}

// console.log(arr)
// console.log(files)
console.log(`mean: ${ arr.reduce((acc, cur) => acc + cur) / arr.length}`)
console.log(`total: ${ arr.reduce((acc, cur) => acc + cur) }`)

# CLI
> node count.js

mean: 2360
total: 82600

章節介紹

文章大概可以粗分成這些部份

一、gulp 介紹

• Day01 前言：參賽目的
• Day02 Gulp 在前端工程化中的角色
• Day03 Gulp4 環境配置

二、gulp 的 hello world

• Day04 來自 gulp 的 hello world：gulp 3.9.1 寫法
• Day05 來自 gulp 的 hello world：gulp4 寫法
• Day06 來自 gulp 的 hello world：JavaScript 模組化方案

三、建立第一個 gulp task

• Day07 第一個 task：以複製檔案為例
• Day08 第一個 task：以複製檔案為例，談 task、src、dest、watch API
• Day09 第一個插件：以複製檔案為例，談路徑表示方式 globs
• Day10 第一個插件：以複製檔案為例，談 node.js 的 stream 與 pipe()

四、在 gulp 中使用插件

• Day11 第一個插件：以清除暫存為例
• Day12 第一個插件：以清除暫存為例，談 gulp-clean、del 插件
• Day13 第一個插件：以清除暫存為例，談 gullp 的插件黑名單

五、HTML 的處理

• Day14 HTML、EJS 的處理
• Day15 HTML、EJS 的處理：談 HTML 樣板語言
• Day16 HTML、EJS 的處理：談 gulp-front-matter 與 gulp-layout
• Day17 HTML、EJS 的處理：$ 是萬能的，談 gulp-load-plugins

六、CSS 的處理

• Day18 CSS 的處理
• Day19 CSS 的處理：談 gulp-sass
• Day20 CSS 的處理：談 gulp-postcss 與 autoprefixer
• Day21 CSS 的處理：談壓縮 CSS 與 gulp-clean-css
• Day22 CSS 的處理：談 sourcemap 與 gulp-sourcemaps

七、JS 的處理

• Day23 JS 的處理
• Day24 JS 的處理：談 gulp-concat
• Day25 JS 的處理：談 gulp-babel
• Day26 JS 的處理：談 gulp-uglify

八、壓縮檔案

• Day27 圖片壓縮處理：談 gulp-imagemin
• Day28 在生產環境時才壓縮檔案
• Day29 在生產環境時才壓縮檔案：談 minimist、gulp-if

九、邊開發邊看畫面變動

• Day30 邊開發邊看畫面變動
• Day31 邊開發邊看畫面變動：談 gulp.watch
• Day32 邊開發邊看畫面變動：談 browserSync
• Day33 邊開發邊看畫面變動：如何一鍵預覽畫面、生成靜態檔案
• Day34 邊開發邊看畫面變動：談 gulp-plumber

十、佈署靜態網頁

• Day35 佈署靜態網頁到 github pages

學到的東西

我在 Day01 的時候有列出一些學習目標，現在回頭檢視一下有沒有學到

Gulp 的使用方式與觀念（雖然之前寫過，但覺得自己不熟）

基礎的前端自動化建構流程會需要哪些步驟

雖然沒有摸得很仔細，像有些 gulp 內建的 API 根本沒看過、參數也沒完全去了解，但基礎的使用方式、與前端工程自動化需要有哪些基本步驟，我有比較了解了

試著查看 Gulp 套件的說明，並簡介

之前很少在看 NPM 套件的文件，而在這次鐵人賽中有讓自己花時間去研究 gulp 的相關套件。這對我最近的一個專案滿有幫助的，讓我在研究陌生 NPM 套件的天書文件時沒那麼害怕

Gulp 4.0 與 Gulp 3.9.1 的差異

雖然底層的差異沒有什麼研究，但一些小差異有體會到。像是 task 的建立方式 (gulp.task or function)、或是 gulp 4.0 原生支援 serial() 等等

ES6 的 import、export 用法 / CommonJS 的 require、exports 用法

之前就知道 ES6 後支援原生的模組引用，但當時我 Node.js 不熟因此 require() 也不熟，前端模組化探索期的模組方案也不熟，導致我對模組化的沒有什麼感覺。因此在 Day02 時有花一點時間研究前端工程、模組化的歷史

Node.js 的觀念認識（例如 stream、pipe()）

寫這 gulp 系列文也讓我對 Node.js 有初步的認識，但也僅有認識而已。之後會再花時間把 Node.js 的相關知識補上。

其他可以挑戰的

雖然知道 gulp 還有其他的應用，但不確定之後還會不會常用到了。先留下一些覺得之後還可以挑戰的項目

搭配 webpack, vue

gulp 在早期如果想讓 JS 模組化，需要使用 Browserify。但我想說，如果 webpack 是近期趨勢的話，那就先研究 gulp 與 webpack 的連動好了。

而 webpack、rollup 等建構工具其中一個火紅的原因，就是因為用來建立 React、Vue 等 SPA 時很方便。所以日後可以也會研究如何用 gulp 搭配 webpack、vue，來建立 SPA 看看

搭配 lint, prettier

這個其實在我目前的一個專案中有用到。只是設定我還沒有很熟，之後想再研究看看

搭配 test

這部份還沒有嘗試過。聽說有什麼單元測試、功能測試、E2E 測試、整合測試…blabla。如果到時候還沒先學會 webpack 的話，可能會先拿 gulp 來跑 test 流程看看