22

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

我试图理解的是，如果我可以.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/'))
})


吞咽流化示例：

（来自：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'))
})
4

4 回答 4

18

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

该“丑陋”插件的工作方式相同。想象一下你想要压缩/丑化的一些巨大的 JS 文件。

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

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

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

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

于 2016-08-10T21:21:51.117 回答
7

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

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

  • gulp-uglify不支持流，因此您应该将流转换为缓冲区（示例使用vinyl-buffer）

  • gulp-streamify可以包装旧插件以支持流（示例使用gulp-uglify）

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

于 2015-05-16T15:01:28.743 回答
1

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


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

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

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

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

于 2015-10-05T10:00:34.597 回答
1

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

是的！它是一条溪流。但它是一个对象流！

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

gulp 流中的每个“数据”事件都会发出一个Vinyl文件对象，如下所示：

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

所以gulp-buffer插件是一个转换流，可以将文件内容stream.Readable从Buffer.

您可以在源代码中看到这一点，它在第 24 行保存原始内容流，并在第 35行分配一个 Buffer 作为新文件内容。

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

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

于 2018-12-14T05:23:58.247 回答