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 vinyl streams Gulp doesn't need to write temporary files between different transformations. And this is one of the main advantages it has over Grunt.

Answer 2

This module is just a bridge that makes it simple to use conventional text streams such as this in combination with gulp.