iT邦幫忙

第 11 屆 iThome 鐵人賽

2
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 36

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

  • 分享至 

  • xImage
  •  

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

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

數據

因為 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 介紹

二、gulp 的 hello world

三、建立第一個 gulp task

四、在 gulp 中使用插件

五、HTML 的處理

六、CSS 的處理

七、JS 的處理

八、壓縮檔案

九、邊開發邊看畫面變動

十、佈署靜態網頁

學到的東西

我在 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 流程看看


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day35 佈署靜態網頁到 github pages
系列文
試著把切版專案升級到 gulp4.0 吧36
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
fillano
iT邦超人 1 級 ‧ 2020-01-03 10:54:01

之前有一個專案是需要根據客戶挑選好的項目打包出去的,覺得gulp步驟太多很麻煩,就寫了一個插件,根據附檔名決定做什麼預處理,然後複製要複製的檔案過去build目錄。gulp的結構簡單明瞭,寫插件還真的蠻方便。

嗯嗯我覺得 gulp 學起來還算滿好懂的 (跟 webpack 相比),想要做一些小修改,滿容易改動成想要的方式。不過我還不到能寫插件的程度就是了 XD

fillano iT邦超人 1 級 ‧ 2020-01-06 09:09:56 檢舉

不到真的需要,也不用自己寫。通常也不會比別人寫的好XD

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-13 05:53:09

恭喜完賽 \0.0/
前端的世界不斷在變動
感謝大大的分享

感謝 ~
我前端還有好多東西不懂 RRR
分享的同時,也是在釐清自己不懂的東西 ~

我要留言

立即登入留言