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?

Solution 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.

Solution 2

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