gulp中乙烯基緩沖液和gulp-streamify的目的是什么？

Question

正如文檔所述，它們都處理將非流插件轉換為流。

我試圖理解的是，如果我可以在某些東西上使用.pipe()方法，那不就意味着它是一個流嗎？

如果是這樣，我該怎么轉換成什么？

乙烯基源流示例：

（來自： https ： //www.npmjs.com/package/vinyl-buffer ）

var browserify = require('browserify')
var source = require('vinyl-source-stream')
var buffer = require('vinyl-buffer')
var uglify = require('gulp-uglify')
var size = require('gulp-size')
var gulp = require('gulp')

gulp.task('build', function() {
  var bundler = browserify('./index.js')

  return bundler.pipe()
    .pipe(source('index.js'))
    .pipe(buffer()) // <---------------------- why?
    .pipe(uglify())
    .pipe(size())
    .pipe(gulp.dest('dist/'))
})

gulp-streamify示例：

（來自： https ： //www.npmjs.com/package/vinyl-source-stream ）

var source = require('vinyl-source-stream')
var streamify = require('gulp-streamify')
var browserify = require('browserify')
var uglify = require('gulp-uglify')
var gulp = require('gulp')

gulp.task('browserify', function() {
  var bundleStream = browserify('index.js').bundle()

  bundleStream
    .pipe(source('index.js'))
    .pipe(streamify(uglify())) // <----------- why?
    .pipe(gulp.dest('./bundle.js'))
})

Answer 1

一個半有用的例子是考慮用一桶水熄滅篝火。 為了撲滅火災，你需要完全填滿水桶，然后將其傾倒在火上，而不是在桶中放幾滴，然后隨着時間的推移在火上傾倒大量的小水滴。 這個比喻並沒有捕捉到所有東西，但最重要的是這個：你需要一桶水才能滅火。

那個“uglify”插件的工作方式相同。 想象一下你想要壓縮/ uglify的一些巨大的JS文件。

加載整個代碼庫需要一點時間，你絕對不想嘗試縮小每一行，對吧？ 想象一下，你加載一行，縮小它，加載另一行，縮小它等等 - 這將是一團糟。 你無法流式傳輸它（你需要一個完整的“桶”代碼才能解開它。）要正確地解釋該文件，你需要先加載所有代碼，然后再嘗試對其進行uglify。

由於Gulp是一個“流式”構建系統，你不能使用uglify，除非你有一些機制將流轉換成一個緩沖區（當它完成后發出一個流。）你提到的這兩個工具都可以實現。

這是流程：STREAM>（BUFFER）> {對整個“緩沖”文件執行一些工作}> STREAM> {其他gulp工作等}

對於您的具體問題，您可以使用.pipe（），因為乙烯基緩沖區/ gulp-streamify有助於將“轉換”流到緩沖區然后緩沖到流。 它們是完成基本相同的事情的不同方法。

Answer 2

如上所述，大多數插件都使用緩沖區（盡管其中一些插件也支持流）。 例子包括gulp-uglify和gulp-traceur。 您可以使用gulp-buffer進行緩沖區轉換。

通過https://medium.com/@webprolific/getting-gulpy-a2010c13d3d5

• gulp-uglify uglify不支持流，所以你應該將流轉換為緩沖區（例子使用vinyl-buffer ）

• gulp-streamify可以換舊插件來支持流 （例如使用gulp-uglify ）

方法不同但結果同樣令人滿意。

Answer 3

我試圖理解的是，如果我可以在某些東西上使用.pipe（）方法，那是不是意味着它是一個流？

不，.pipe（）也可以傳遞緩沖區。 這篇博客文章解釋得很好：

https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

一些gulp- *插件通過將緩沖的乙烯基文件對象作為輸入來工作。
但是， vinyl-source-stream會發出流式乙烯基文件對象。

這就是乙烯基緩沖液的用武之地。所以我們只需要使用乙烯基緩沖液將其轉換為緩沖乙烯基，就像這樣

Answer 4

我試圖理解的是，如果我可以在某些東西上使用.pipe（）方法，那是不是意味着它是一個流？

是! 這是一個流。 但它是一個對象流 ！

它不是流式傳輸一系列字符，而是流式傳輸一系列對象，這些對象是您采購的文件。

gulp流中的每個“data”事件都會發出一個Vinyl文件對象，如下所示：

{
  cwd: '/',              //<string>
  base: '/test/',        //<string>
  path: '/test/file.js', //<string>
  contents: contents     //<string> | <Buffer> | <stream.Readable>
}

---

因此gulp-buffer插件是一個Transform流 ，它將文件內容從stream.Readable為Buffer 。

你可以在源代碼中看到這一點，它在第24行保存原始內容流，並在第35 行分配一個Buffer作為新文件內容。

Streamify在第35 行和第48 行做同樣的事情。

在Uglify完成處理后，可以將文件內容保留為緩沖區。 內容是一個緩沖區總是好的，gulp只是在采購時不這樣做，因為它太昂貴了。