這是在講 Gulp 不是飲料是任務自動化工具這件事：Gulp 基礎篇

發表於 更新於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

前面已經將環境、專案目錄及 Gulp 已經準備好了，接下來就是瞭解基礎的 Gulp 撰寫。

前言

前面已經將環境、專案目錄及 Gulp 已經準備好了，接下來就是瞭解基礎的 Gulp 撰寫。

環境準備

首先我們要新增一個檔案叫 gulpfile.js 在專案目錄

src

並且還要新增一個目錄叫 src (也可以叫 source)

src

接下來在 src 資料夾下面新增一個檔案 index.html (內容隨意)

index

基礎 Gulp

這邊開始會撰寫一點基礎的 gulp，讓我們開啟 gulpfile.js，然後將程式碼貼入再來一一講解

1
2
3
4
5
6
const gulp = require('gulp');

gulp.task('copyHTML', () => {
  return gulp.src('./src/**/*.html')
    .pipe(gulp.dest('./public/'));
})

首先要先引入 gulp 的工具作管理 const gulp = require('gulp');

gulp

引入之後，我們會使用 task (任務) 來執行裡面的動作，我們預計將 src 裡面的 index.html 複製一份到 public 中
(寫法我是使用 ES6 的寫法)

task

在這邊記得要 return 否則不會有反應唷!

return

然後 gulp.src() 是指檔案的來源，可以使用 **/*.html 將底下的 HTML 通通做處理

src

後面就會使用一個 pipe 來接著 (概念就像水管一樣一直接)

pipe

內容就是要輸出的目錄，輸出的方式就使用 gulp.dest()

dest

最後就開啟 cmd 來輸入指令

1
gulp copyHTML

copyHTML

此時你就會發現多了一個 public 的資料夾，而且內容還是我們剛剛撰寫的

public

恭喜你已經學會 Gulp 的精隨了，因為 Gulp 大致上就是這樣子不停地在撰寫，後面來會教導如何引入 SCSS、Babel、image 壓縮等任務，但是要注意我所撰寫的是 Gulp 4，所以與 Gulp 3 會有些許不同唷。

最後如果你還是很好奇 Gulp 運作原理，我推薦六角學院的 Gulp 課程 給您~