問題描述

正如文檔所說，它們都處理將非流插件轉換為流.

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的目的是什么?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！