What are the purposes of vinyl-buffer and gulp-streamify in gulp?
gulp, javascript, node.js-stream
Solution
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.
That "uglify" plugin works the same way. Imagine some enormous JS file you'd want to compress/uglify.
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.
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.
Here's the flow: STREAM > (BUFFER) > {perform some work on the whole "buffered" file} > STREAM > {other gulp work, etc }
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.
Problem
As the documentation says, they both deal with transforming non-stream plugins to stream. 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? vinyl-source-stream example: (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')) }) ```