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

一个半有用的例子是考虑用一桶水熄灭篝火。为了扑灭火灾，你需要完全填满水桶，然后将其倾倒在火上，而不是在桶中放几滴，然后随着时间的推移在火上倾倒大量的小水滴。这个比喻并没有捕捉到所有东西，但最重要的是这个：你需要一桶水才能灭火。

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

加载整个代码库需要花费一点时间。你绝对不想尝试将每一行缩小，因为它？想象一下，你加载一行，缩小它，加载另一行，缩小它等等 - 这将是一团糟。你不能流式传输它（你需要一个完整的“存储桶”代码然后你可以解开它。）要正确地改变该文件，你需要首先加载所有该代码，然后再尝试对其进行uglify

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

这是流程： STREAM＆gt; （BUFFER）＆gt; {对整个“缓冲”文件执行一些工作}＆gt; STREAM＆gt; {其他gulp work等}

对于您的具体问题，您可以使用.pipe（），因为乙烯基缓冲区/ gulp-streamify有助于将流“转换”为缓冲区，然后缓冲到流。他们采用不同的方法来完成同样的事情。

Answer 2

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

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

gulp-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（）方法上使用某事，这是否意味着它是流？

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

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

gulp流中的每个“数据”事件都会发出一个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上分配了一个Buffer作为新文件内容。

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

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

gulp中乙烯基缓冲液和gulp-streamify的目的是什么？

vinyl-source-stream示例：

gulp-streamify示例：

4 个答案: