Gulp前置作業
在使用 Gulp 前先檢查是否有安裝 node，打開終端機輸入，如果有就會顯示版本號。
node -v
還需要檢查 npm 有沒有安裝。
npm -v
安裝全域的Gulp
首先！輸入下面指令安裝全域的 Gulp-cli，目的是要讓使用者可以在任何地方透過 cli 指令(例如：gulp)來下指令。
npm install gulp-cli -g初始化專案
在要使用的資料夾目錄下輸入下面指令初始化專案，之後會產生一個 package.json檔案，該檔案基本上就是記載了你使用了哪些套件。
npm init輸入指令後會出現一連串的問題要你回答，這些問題大概就是專案名稱、專案介紹、作者、是否要連上Git等等的問題，這裡可以一直按 Enter 往下走。
如果想跳過上面那些問題，可以改輸入下面指令。
npm init -y安裝專案內的Gulp
接下來輸入下面指令在要使用 Gulp 的專案目錄下安裝 Gulp，這樣才可以在該專案中使用 Gulp API 來定義建構的任務。
npm install --save-dev gulp安裝完成後你的專案裡會出現 node_modules 資料夾和 package-lock.json 檔案。
之後專案有需要用到 Gulp 時都必須在專案目錄下安裝一次！
安裝完成後輸入下面指令檢查一下，有正確安裝會顯示版本。你看到下面出現 Local version: Unknown 是因為我沒有在專案的目錄下安裝造成的結果。
gulp -v
開發第一個 Gulp Task
現在我們要新增一個 gulpfile.js 檔案和一個 index.html，前者就是 Gulp 專屬配置檔案，所有的 Task 任務都是在這裡完成的。現在的專案資料夾結構如下。
gulpdemp/
|
|———node_modules/
|
|———gulpfile.js
|
|———index.html
|
|———package.lock.json
|
|———package.json來測試一下，在 gulpfile.js 檔案裡新增程式碼。
// 引入套件 及 套件APIconst gulp = require('gulp');
// 任務一function copyfile() { return gulp.src('./index.html') .pipe(gulp.dest('./public'));}
// 輸出任務exports.default = gulp.series(copyfile);
然後在終端機輸入指令。
gulp從上面的程式碼可以更瞭解 Gulp 的一些使用方法！
function "任務名稱" () {}gulp.src()導入index.html這個檔案(輸入端).pipe()其實就是把很多個任務連在一起。
按照官網的解釋，在 gulp.src() 取得檔案後會生成一個流( stream) ，它是一種數據處理的方法，從輸入到輸出可以稱為一個流，它可以隨讀取的數量多寡來處理內容，在大數據中就非常好用。然而要怎麼對這些流做動作？就是透過 .pipe() ，我們可以把想做的事情透過方法寫在 .pipe() 內。
gulp.dest()就是檔案輸出的位置(輸出端)
這個任務的目的就是導入 index.html 檔案，接著遇到第一個 pipe() 建構節點，需要對內容做處理；而處理內容為 gulp.dest() 輸出到目錄，這也是 public / index.htm 被創見的原因。在執行完指令後可以發現檔案結構如下。
gulpdemp/
|
|———node_modules/
|
|———public/
| |
| |———index.html # Html副本(編譯後)
|
|———gulpfile.js # Gulp配置檔案
|
|———index.html # Html主檔案(編譯前)
|
|———package.lock.json
|
|———package.json基本上整個 Gulp 的流程大部分是這樣，差別只是在各種不同套件而已。
輸出任務
在上面的程式碼輸出任務的部分看到使用 series() 的方法，這是 Gulp 4 新增的語法，還有另外一個方法 parallel() 。而這兩個 API 差異就在於同步與非同步。
gulp.series()：用於同步任務執行，也就是執行完一個任務之後才會再執行下一個。可接受任務名稱或是function做為任務執行參數。要注意的是當組合多個任務的時候，只要有一個任務錯誤將導致整個任務結束。gulp.parallel()：用於執行非同步任務，也就是說所以任務會同時執行。可接受任務名稱或是function做為任務執行參數。要注意的是當組合多個任務的時候，只要有一個任務錯誤可能導致整個任務結束，也可能其他任務會執行完。
以往所使用的 gulp.task() 建立任務的語法在 Gulp 4 的版本下雖然還是可以使用，但官方表示不建議再這樣使用，取而代之的是 function() 的寫法，就像我上面寫的那樣。
