What are the goals of vinyl buffer and gulp-streamify in gulp?

Question

As the documentation says, they both deal with converting non-streaming plugins to a stream.

I'm trying to understand that if I can use the .pipe() method for something, doesn't that mean it is a stream?

If so, what can I convert to what's here?

Example of vinyl source stream :

(from: 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 example :

(from: 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

One semi-useful example is to think of pulling a fire with a bucket of water. To put out a fire, you would like to completely fill the bucket before dropping it onto the fire by putting a few drops in the bucket, and then discard a lot of drops over time on the fire. This metaphor does not capture everything, but the big idea is this: you need a FULL bucket of water before you can put out the fire.

This uglify plugin works the same way. Imagine some huge JS file that you want to compress / guess.

It will take a little time to load the entire code base, and you definitely will not want to try to minimize each line as it is, right? Imagine that you load one line, reduce it, load another line, reduce it, etc. - it will be a mess. You cannot pass it (you need a full “bucket” of code before you can guess it.) To properly remove this file, you will need to download all this code before trying to guess it.

Since Gulp is a "streaming" build system, you cannot use uglify unless you have a mechanism to turn a stream into a buffer (& when it issues a stream). Both of the tools you mentioned make this possible.

Here's the stream: STREAM> (BUFFER)> {do some work on the entire "buffered" file}> STREAM> {other Gulp work, etc.}

For your specific question, you can use .pipe (), because virtual-buffer / gulp -streamify help "converts" streams to buffers, and then buffers to streams. They are different approaches to doing essentially the same thing.

Answer 2

As already mentioned, most plugins work with buffers (although some of them also support streams). Examples include gulp -uglify and gulp -traceur. You can convert to buffers using gulp -buffer.

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

• gulp-uglify support stream, so you must convert the stream to a buffer (example uses vinyl-buffer )

• gulp-streamify can migrate old plugins to support streams (example uses gulp-uglify )

Different approaches, but equally satisfactory results.

Answer 3

I'm trying to figure out if I can use the .pipe () method for something, doesn't that mean it's a stream?

No, .pipe () can also pass buffers. this blog post explains it well:

https://medium.com/@sogko/gulp-browserify-the-gulp-y-way-bb359b3f9623

Some gulp - * plugins work by using buffered vinyl file objects as input.
But the vinyl source stream generates a streaming vinyl file.

That's where the vinyl buffer comes in. So we just need to convert this to a vinyl buffer using a vinyl buffer, like

Answer 4

I'm trying to figure out if I can use the .pipe () method for something, doesn't that mean it's a stream?

Yes! This is a stream. But this is a stream of objects !

Instead of streaming a series of characters, it transfers a stream of objects, which are the files you received.

Each "data" event in the gulp stream generates a Vinyl file object that looks something like this:

 { cwd: '/', //<string> base: '/test/', //<string> path: '/test/file.js', //<string> contents: contents //<string> | <Buffer> | <stream.Readable> } 

---

Thus, the stream.Readable plugin is a Transform stream that converts the contents of a file from stream.Readable to Buffer .

You can see this in the source, where it stores the original content stream on line 24 and assigns a buffer as the new file content on line 35 .

Streamify does the same on line 35 and line 48 .

You can leave the contents of the file as a buffer after Uglify completes its processing. It is always normal for the contents to be a buffer, gulp simply does not do this when searching, because it is too expensive.