Does browserify API need vinyl object?

Question

Does browserify API need vinyl object?

I'm trying to browserify some angular files and integrate them into my gulp tasks. While trying to get the gulp plugin for browserify I came across this https://github.com/gulpjs/plugins/issues/47

Browserify should be used as a standalone module. It returns a stream and figures out your dependency graph. If you need vinyl objects, use browserify + vinyl-source-stream

I'm ashamed to say that I didn't know what vinyl objects were and after reading up a bit I came across this.

Vinyl is a very simple metadata object that describes a file.

And apparently you need vinyl adapters to expose .src, .watch and .dest? So, I'm guessing vinyl-source-stream is that sort of adapter? I guess what I don't understand is why would I need vinyl object in my browserify when I can simply do this:-

var gulp = require('gulp'),
    browserify = require('browserify');

gulp.task('browserify', function(){
    browserify('./js/index.js')
    .bundle()
    .pipe(gulp.dest('./js/bundle.js'));

And instead have to do this:-

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify');

gulp.task('browserify', function(){
    browserify('./js/index.js')
    .bundle()
    .pipe(source('./js/index.js')) //this line in particular
    .pipe(gulp.dest('./js/bundle.js'));

Apologize if this doesn't make sense. I'll edit this if it needs more explanation.

node.js
npm
gulp
browserify

Answer 1

You can't just pipe to the string './js/bundle.js'. You use source to attach a name to the new file created by bundle, then you pipe the stream of file(s) to it's destination directory:

var gulp = require('gulp'),
    source = require('vinyl-source-stream'),
    browserify = require('browserify');

gulp.task('browserify', function(){
   return browserify('./js/index.js')
    .bundle()
    .pipe(source('bundle.js')) //this line in particular
    .pipe(gulp.dest('./js'));