我們介紹了很多 Gulp 的 API 卻遲遲沒有介紹到 pipe() ,其實 pipe() 並非 Gulp 的 API 而是 Node.js 所提供的。
Node.js 同步讀取資料
用戶端的 Javascript 本身沒有處理本地端檔案的能力,但 Node.js 給了 Javascript 讀寫本地端檔案的能力。
但是同步讀寫的壞處就是檔案太大時,程式要花很多時間在等檔案讀取完,無法做其他事,或者沒辦法一次寫入太大的檔案。因此 Node.js 有其他方式來因應:非同步讀寫以及 stream 機制。
stream 機制
stream 不是一次讀取全部檔案內容,而是拆分好幾個 chunk 然後 放到 buffer 中,等到部分 chunk 讀寫完了再從 buffer 中拿一些出來讀寫。
stream 中的 pipe()
我們可以簡單把 pipe() 理解為資料流中的水管,主導資料的流向
例如水庫的水,下雨接到水庫後,還要淨水處理,消毒等等最後才流到你家,寫成偽程式碼就變這樣
下雨()
.pipe(水庫)
.pipe(泥沙沈澱)
.pipe(消毒)
.pipe(社區大樓水塔)
.pipe(水龍頭打開接到水)
在 gulp 中也是一樣道理,在取得 src() 路徑的檔案後,經過 pipe() 流到 dest() 的目錄中。
function copyHTML() {
return gulp.src('./source/scss/all.scss')
.pipe(gulp.dest('./public/css'));
}
小結
gulp 中常用的 API 都整理差不多了,後面再來整理如何使用 gulp 常用套件吧!