iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
2
Modern Web

前端設計轉前端工程師-JS踩坑雜記 30 天系列 第 6

前端起步走 - 學習自動化工具-Gulp為例

我在我轉職前端生涯第一間公司待了 2 年多
前面章節有提過,因為是身在天天如戰場的接案公司
再加上那時我的公司應該算是工作室的規模
員工數其實不超過 10 人 (固定咖只有 4 人)

而阿宅 PO 我,則是全公司唯一的 網頁設計師 / 前端設計師...
那時候還要兼 UI/UX 和 PM 呢... (菸)

而為了每個案子能如期交件 (因為才有錢收)
如何把時間像擠乳溝一樣給擠出來,我真是煞費苦心 (不要亂用成語)
那時很積極加入技術社群以及跑社群的聚會和講座
有夥伴推薦我學習 Gulp 這一套自動化工具

所謂的自動化工具
就是可以把我們每天必做的例行作業,寫成一個個 Task
然後依照你的開發需求,做排序之後再一個 Task 一個 Task 執行
就像有一個隱形的開發 SOP 工廠,幫你把固定要做的工作
第一關 => 第二關 => 第三關...這樣執行過去

安裝 Gulp

接下來會是以 Gulp v3.9.1 版本為主來講解流程
主要是大概跑過安裝流程和 Gulp 設定
細節的部分會比較少唷~~

  1. Node v11.15.0
    npm install node@11.15.0 -g
    推薦使用 NVM 做為管理 Node 版本的工具
  2. Gulp v3.9.1
    npm install gulp@3.9.1 -g
  3. 建立 Package.json
    npm init
  4. 建立 gulpfile.js

這邊簡單說明 gulpfile Task 架構

gulp.task('plugin', function() {
  return gulp
    .src('./source/js/plugin/*.js')
    .pipe(gulp.dest('./build/js'))
});
  1. 建立 Task
gulp.task('*task name*', function() {
    Return gulp
      Code...
});
  1. .src() Source Code 的位置
  2. .pipe(gulp.dest('./build/js')) 編譯後的檔案存檔路徑

以上是快速帶過,我在轉職前端工程師時的學習過程
而 Gulp 目前已升級到 Gulp 4,那為何要介紹 Gulp 3 呢?
原因是主要用意是讓設計師簡單了解自動化工具是什麼,而 Gulp 3 我覺得相對好懂
目前就業市場上大多使用 Webpack 這套工具,可是我覺得它複雜很多
如果讓初學的捧油直接去學 Webpack 會跟我前面說的一樣,驚嚇度 100

我自己也是從 Gulp 3 入門,這對後來我在學習 Webpack 時很有幫助
把 Gulp 3 當成是一塊敲門磚,一步一步慢慢來

慢慢來,比較快嘛~


上一篇
前端起步走 - 學習Pug
下一篇
前端起步走 - 學習建立自己的開發環境/流程
系列文
前端設計轉前端工程師-JS踩坑雜記 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言