問(wèn)題描述

正如文檔所說(shuō)，它們都處理將非流插件轉(zhuǎn)換為流.

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

我試圖理解的是，如果我可以在某物上使用 .pipe() 方法，這不就意味著它是一個(gè)流嗎?

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

如果是這樣，我應(yīng)該在這里轉(zhuǎn)換成什么?

If so, what do I convert to what here?

(來(lái)自: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/'))
})

(來(lái)自: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'))
})

推薦答案

一個(gè)半有用的例子是考慮用一桶水撲滅篝火.要撲滅大火，您需要先將桶完全裝滿，然后再將其倒入火中，而不是在桶中滴幾滴，然后隨著時(shí)間的流逝將大量小滴倒入火中.這個(gè)比喻并不能說(shuō)明一切，但重要的是:你需要一桶水才能撲滅大火.

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.

那個(gè)uglify"插件的工作方式是一樣的.想象一下你想要壓縮/丑化的一些巨大的 JS 文件.

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

加載整個(gè)代碼庫(kù)需要一點(diǎn)時(shí)間你肯定不想嘗試縮小每一行，對(duì)吧?想象一下，你加載一行，縮小它，加載另一行，縮小它等等——這會(huì)是一團(tuán)糟.您無(wú)法對(duì)其進(jìn)行流式傳輸(您需要完整的代碼桶"才能對(duì)其進(jìn)行丑化.)要正確丑化該文件，您需要先加載 all 該代碼，然后再嘗試對(duì)其進(jìn)行丑化.

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 是一個(gè)流式"構(gòu)建系統(tǒng)，因此您不能使用 uglify，除非您有某種機(jī)制將流轉(zhuǎn)換為緩沖區(qū)(并且當(dāng)它完成時(shí)發(fā)出一個(gè)流.)您提到的兩種工具都可以實(shí)現(xiàn)這一點(diǎn).

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) > {對(duì)整個(gè)緩沖"文件執(zhí)行一些工作} > STREAM > {其他 gulp 工作等}

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

對(duì)于您的具體問(wèn)題，您可以使用 .pipe() 因?yàn)関inyl-buffer/gulp-streamify 幫助將流轉(zhuǎn)換"為緩沖區(qū)，然后將緩沖區(qū)轉(zhuǎn)換為流".它們是完成本質(zhì)上相同的事情的不同方法.

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.

這篇關(guān)于gulp中vinyl-buffer和gulp-streamify的目的是什么?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！