gulp處理文件

gulp處理文件

gulp 暴露了 src() 和 dest() 方法用于處理計(jì)算機(jī)上存放的文件。

src() 接受 glob 參數(shù)，并從文件系統(tǒng)中讀取文件然后生成一個(gè) Node 流(stream) 。它將所有匹配的文件讀取到內(nèi)存中并通過(guò)流（stream）進(jìn)行處理。

由 src() 產(chǎn)生的流（stream）應(yīng)當(dāng)從任務(wù)（task）中返回并發(fā)出異步完成的信號(hào)，就如 創(chuàng)建任務(wù)(task) 文檔中所述。

const { src, dest } = require('gulp');

exports.default = function() {
  return src('src/*.js')
    .pipe(dest('output/'));
}

流（stream）所提供的主要的 API 是 .pipe() 方法，用于連接轉(zhuǎn)換流（Transform streams）或可寫流（Writable streams）。

const { src, dest } = require('gulp');
const babel = require('gulp-babel');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(dest('output/'));
}

dest() 接受一個(gè)輸出目錄作為參數(shù)，并且它還會(huì)產(chǎn)生一個(gè) Node 流（stream），通常作為終止流（terminator stream）。當(dāng)它接收到通過(guò)管道（pipeline）傳輸?shù)奈募r(shí)，它會(huì)將文件內(nèi)容及文件屬性寫入到指定的目錄中。gulp 還提供了 symlink() 方法，其操作方式類似 dest()，但是創(chuàng)建的是鏈接而不是文件（ 詳情請(qǐng)參閱 symlink() ）。

大多數(shù)情況下，利用 .pipe() 方法將插件放置在 src() 和 dest() 之間，并轉(zhuǎn)換流（stream）中的文件。

向流（stream）中添加文件

src() 也可以放在管道（pipeline）的中間，以根據(jù)給定的 glob 向流（stream）中添加文件。新加入的文件只對(duì)后續(xù)的轉(zhuǎn)換可用。如果 glob 匹配的文件與之前的有重復(fù)，仍然會(huì)再次添加文件。

這對(duì)于在添加普通的 JavaScript 文件之前先轉(zhuǎn)換部分文件的場(chǎng)景很有用，添加新的文件后可以對(duì)所有文件統(tǒng)一進(jìn)行壓縮并混淆（uglifying）。

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(uglify())
    .pipe(dest('output/'));
}

分階段輸出

dest() 可以用在管道（pipeline）中間用于將文件的中間狀態(tài)寫入文件系統(tǒng)。當(dāng)接收到一個(gè)文件時(shí)，當(dāng)前狀態(tài)的文件將被寫入文件系統(tǒng)，文件路徑也將被修改以反映輸出文件的新位置，然后該文件繼續(xù)沿著管道（pipeline）傳輸。

此功能可用于在同一個(gè)管道（pipeline）中創(chuàng)建未壓縮（unminified）和已壓縮（minified）的文件。

const { src, dest } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

exports.default = function() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(src('vendor/*.js'))
    .pipe(dest('output/'))
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('output/'));
}

模式：流動(dòng)（streaming）、緩沖（buffered）和空（empty）模式

src() 可以工作在三種模式下：緩沖（buffering）、流動(dòng)（streaming）和空（empty）模式。這些模式可以通過(guò)對(duì) src() 的 buffer 和 read 參數(shù) 進(jìn)行設(shè)置。

• 緩沖（Buffering）模式是默認(rèn)模式，將文件內(nèi)容加載內(nèi)存中。插件通常運(yùn)行在緩沖（buffering）模式下，并且許多插件不支持流動(dòng)（streaming）模式。
• 流動(dòng)（Streaming）模式的存在主要用于操作無(wú)法放入內(nèi)存中的大文件，例如巨幅圖像或電影。文件內(nèi)容從文件系統(tǒng)中以小塊的方式流式傳輸，而不是一次性全部加載。如果需要流動(dòng)（streaming）模式，請(qǐng)查找支持此模式的插件或自己編寫。
• 空（Empty）模式不包含任何內(nèi)容，僅在處理文件元數(shù)據(jù)時(shí)有用。