gulp中vinyl-buffer和gulp-streamify的目的是什么? [英] What are the purposes of vinyl-buffer and gulp-streamify in gulp?

问题描述

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

As the documentation says, they both deal with transforming non-stream plugins to stream.

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

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

如果是这样，我应该在这里转换成什么?

If so, what do I convert to what here?

(来自: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-流)

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'))
})

推荐答案

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

One semi-useful example is to think about putting out a campfire with a bucket of water. To put out the fire you would want to completely fill up the bucket before dumping it on the fire rather putting a few drops in the bucket and then dumping lots of little drops over time on the fire. This metaphor doesn't capture everything but the big idea is this: you need a FULL bucket of water before you can put out the fire.

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

That "uglify" plugin works the same way. Imagine some enormous JS file you'd want to compress/uglify.

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

It will take a little bit of time to load the whole codebase & you definitely wouldn't want to try minifying each line as it comes in, right? Imagine you load a single line, minify it, load another line, minify it, etc etc-- it'd be a mess. You can't stream it (you need a full "bucket" of code before you can uglify it.) To uglify that file properly you'd need to load all that code first before attempting to uglify it.

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

Since Gulp is a "streaming" build system, you can't use uglify unless you have some mechanism to turn the stream into a buffer (& when it's done emit a stream.) Both tools you mention make this possible.

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

Here's the flow: STREAM > (BUFFER) > {perform some work on the whole "buffered" file} > STREAM > {other gulp work, etc }

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

To your specific question, you can use .pipe() because vinyl-buffer/gulp-streamify help "convert" streams to buffers then buffers to streams. They're different approaches to accomplish essentially the same thing.

这篇关于gulp中vinyl-buffer和gulp-streamify的目的是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！