javascript - 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

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

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

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

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

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

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