Why do I have to use vinyl-source-stream with gulp?

Question

I am trying to use gulp and browserify to transform my .jsx files into .js files.

var gulp = require('gulp'); var browserify = require('browserify'); var reactify = require('reactify');  gulp.task('js', function () {   browserify('public/javascripts/src/app.jsx')     .transform(reactify)     .bundle()     .pipe(gulp.dest('public/javascripts/dist')) }); 

```

The above threw Arguments to path.resolve must be strings. I managed to get around it by using vinyl-source-stream

var source = require('vinyl-source-stream'); ... .bundle() .source('app.js') ... 

Why does this work? I am fairly new to nodejs and gulp. After reading the README of the project and the source code, I am still confused. Any help?

Answer 1

I think that reading this article gulp The vision, history, and future of the project can help you to clarify a few concepts.

Basically you can say that vinyl-source-stream convert the readable stream you get from browserify into a vinyl stream that is what gulp is expecting to get.

A vinyl stream is a Virtual file format, and it is fundamental for Gulp. Thanks to this vinyl streams Gulp doesn't need to write a temporal file between different transformations. And this is one of the main advantages it has over Grunt.