前端筆記-Gulp-pipe()

Gene
Sep 29, 2021

--

我們介紹了很多 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 常用套件吧!

參考資料:https://ithelp.ithome.com.tw/articles/10221119

--

--

Gene
Gene

Written by Gene

— Do or Do Not. There is no Try!

No responses yet