gulp 中的 vinyl-buffer 和 gulp-streamify 的用途是什么？

Question

如文档所述，它们都涉及将非流插件转换为流。

我试图理解的是，如果我可以对某个东西使用.pipe()方法，那不就意味着它是一个流吗？

如果是这样，我在这里将什么转换为什么？

vinyl-source-stream 例子：

（来自：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

As said, most plugins work with buffers (although some of them also support streams). Examples include gulp-uglify and gulp-traceur. You can do the conversion to buffers using gulp-buffer.

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

gulp-uglify 不支持流，因此您应该将流转换为缓冲区（示例使用 vinyl-buffer）
gulp-streamify 可以包装旧插件以支持流（示例使用gulp-uglify）

不同的做法，同样令人满意的结果。

Answer 2

What I try to understand is if I can use the .pipe() method on something, doesn't it mean that it's a stream?

不，.pipe() 也可以传递缓冲区。这个博客 post 解释得很好：

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

Some gulp-* plugins works by taking in buffered vinyl files objects as input.
But vinyl-source-stream emits a streaming vinyl file object.

That’s where vinyl-buffer comes in. So we simply need to convert that to a buffered vinyl by using vinyl-buffer, like so

Answer 3

一个半有用的例子是考虑用一桶水扑灭篝火。要灭火，您需要在将桶倒在火上之前将桶完全装满，而不是在桶中滴几滴，然后随着时间的推移在火上倾倒大量小滴。这个比喻并没有抓住一切，但大意是这样的：你需要一桶满水才能灭火。

"uglify" 插件的工作方式相同。想象一下您想要 compress/uglify 的一些巨大的 JS 文件。

加载整个代码库需要一点时间，您肯定不想在每一行代码出现时都尝试缩小，对吧？想象一下，你加载一行，缩小它，加载另一行，缩小它，等等——这会是一团糟。你不能流式传输它（你需要完整的 "bucket" 代码才能对其进行丑化。）要正确丑化该文件，你需要先加载 all 该代码在试图丑化它之前。

由于 Gulp 是一个 "streaming" 构建系统，您不能使用 uglify 除非您有某种机制将流转换为缓冲区（以及完成后发出流。）您提到的工具使这成为可能。

流程如下： STREAM > (BUFFER) > {对整个 "buffered" 文件执行一些工作} > STREAM > {其他 gulp 工作等 }

对于您的具体问题，您可以使用 .pipe() 因为 vinyl-buffer/gulp-streamify 帮助 "convert" 流到缓冲区然后缓冲区到流。它们是完成基本同一件事的不同方法。

Answer 4

What I try to understand is if I can use the .pipe() method on something, doesn't it mean that it's a stream?

是的！它是一个流。但它是一个 object stream！

它不是流式传输一系列字符，而是流式传输一系列对象，这些对象是您获取的文件。

gulp 流中的每个 'data' 事件都会发出一个 Vinyl 文件对象，看起来像这样：

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

所以 gulp-buffer plugin is a Transform stream 将文件内容从 stream.Readable 转换为 Buffer。

您可以在源代码中看到这一点，它将原始内容流保存在 line 24 and assigns a Buffer as the new file contents on line 35 上。

Streamify does the same thing, on line 35 and line 48.

Uglify 完成处理后，将文件内容保留为缓冲区是可以的。内容作为缓冲区总是可以的，gulp 只是在采购时不这样做，因为它太昂贵了。

gulp 中的 vinyl-buffer 和 gulp-streamify 的用途是什么？

What are the purposes of vinyl-buffer and gulp-streamify in gulp?

javascript

node.js-stream

gulp

vinyl-source-stream 例子：

gulp-streamify 示例：