gulp中vinyl-buffer和gulp-streamify的目的是什么？答案

【问题标题】：What are the purposes of vinyl-buffer and gulp-streamify in gulp?gulp中vinyl-buffer和gulp-streamify的目的是什么？
【发布时间】：2015-04-25 09:02:28
【问题描述】：

正如文档所说，它们都处理将非流插件转换为流。

我试图理解的是，如果我可以在某事上使用.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'))
})

【问题讨论】：

标签： javascript gulp node.js-stream

【解决方案1】：

一个半有用的例子是考虑用一桶水扑灭篝火。要扑灭大火，您需要先将桶完全装满，然后再将其倒入火中，而不是在桶中滴几滴，然后随着时间的流逝将大量小滴倒入火中。这个比喻并不能说明一切，但重要的是：你需要一桶水才能扑灭大火。

那个“uglify”插件的工作方式是一样的。想象一下你想要压缩/丑化的一些巨大的 JS 文件。

加载整个代码库需要一点时间，而且您肯定不想尝试缩小每一行，对吧？想象一下，你加载一行，缩小它，加载另一行，缩小它等等——这会是一团糟。您无法对其进行流式传输（您需要完整的“代码桶”才能对其进行丑化。）要正确丑化该文件，您需要先加载 all 该代码，然后再尝试对其进行丑化.

由于 Gulp 是一个“流式”构建系统，因此您不能使用 uglify，除非您有某种机制可以将流转换为缓冲区（并且在完成后发出流。）您提到的两种工具都可以做到这一点。

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

对于您的具体问题，您可以使用 .pipe() 因为vinyl-buffer/gulp-streamify 帮助将流“转换”为缓冲区，然后将缓冲区“转换为流”。它们是完成本质上相同的事情的不同方法。

【讨论】：

【解决方案2】：

如前所述，大多数插件都使用缓冲区（尽管其中一些还支持流）。示例包括 gulp-uglify 和 gulp-traceur。您可以使用 gulp-buffer 转换为缓冲区。

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

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

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

【讨论】：

【解决方案3】：

我想了解的是我是否可以使用 .pipe() 方法东西，不是说是流吗？

不，.pipe() 也可以传递缓冲区。这篇博文很好地解释了这一点：

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

一些 gulp-* 插件通过将缓冲乙烯基文件对象作为输入。
但是 vinyl-source-stream 会发出 streaming 乙烯基文件对象。

这就是 vinyl-buffer 的用武之地。所以我们只需要将其转换为使用 vinyl-buffer 到缓冲的乙烯基，就像这样

【讨论】：

【解决方案4】：

我想了解的是我是否可以使用 .pipe() 方法东西，不是说是流吗？

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

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

gulp 流中的每个 'data' 事件都会发出一个 Vinyl 文件对象，如下所示：

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

所以 gulp-buffer 插件是一个 Transform stream 将文件内容从 stream.Readable 转换为 Buffer >。

您可以在源代码中看到这一点，它将原始内容流保存在line 24 上，并分配一个缓冲区作为line 35 上的新文件内容。

Streamify 在line 35 和line 48 上做同样的事情。

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

【讨论】：