gulp 暴露了 src() 和 dest() 方法用于處理計算機上存放的文件。
src() 接受 glob 參數(shù),并從文件系統(tǒng)中讀取文件然后生成一個 Node 流(stream) 。它將所有匹配的文件讀取到內(nèi)存中并通過流(stream)進行處理。
由 src() 產(chǎn)生的流(stream)應(yīng)當從任務(wù)(task)中返回并發(fā)出異步完成的信號,就如 創(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() 接受一個輸出目錄作為參數(shù),并且它還會產(chǎn)生一個 Node 流(stream),通常作為終止流(terminator stream)。當它接收到通過管道(pipeline)傳輸?shù)奈募r,它會將文件內(nèi)容及文件屬性寫入到指定的目錄中。gulp 還提供了 symlink() 方法,其操作方式類似 dest(),但是創(chuàng)建的是鏈接而不是文件( 詳情請參閱 symlink() )。
大多數(shù)情況下,利用 .pipe() 方法將插件放置在 src() 和 dest() 之間,并轉(zhuǎn)換流(stream)中的文件。
src() 也可以放在管道(pipeline)的中間,以根據(jù)給定的 glob 向流(stream)中添加文件。新加入的文件只對后續(xù)的轉(zhuǎn)換可用。如果 glob 匹配的文件與之前的有重復(fù),仍然會再次添加文件。
這對于在添加普通的 JavaScript 文件之前先轉(zhuǎn)換部分文件的場景很有用,添加新的文件后可以對所有文件統(tǒng)一進行壓縮并混淆(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)。當接收到一個文件時,當前狀態(tài)的文件將被寫入文件系統(tǒng),文件路徑也將被修改以反映輸出文件的新位置,然后該文件繼續(xù)沿著管道(pipeline)傳輸。
此功能可用于在同一個管道(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/'));
}
src() 可以工作在三種模式下:緩沖(buffering)、流動(streaming)和空(empty)模式。這些模式可以通過對 src() 的 buffer 和 read 參數(shù) 進行設(shè)置。
更多建議: