Working example with Browserify

[eightyfive]

That would be great to have a working example with Browserify for the following reasons:

• A lot of people are coming to this module from gulp-browserify being depreciated
• A lot of these people are newbies regarding Node.js env
• The Node.js streaming process is not straight forward for newbies

So, talking about newbies... Here I am!

I tried to figure out on my own how to plug vinyl-map with browserify, but with no luck..

I understand that browserify.bundle() returns a Readable stream, so "all I would have to do" is to return its content (string) from the mapper function...

var browserify = require('browserify');
var map = require('vinyl-map');

gulp.task('scripts', function() {

 var bundleApp = map(function (contents, filename) {

    var output;
    var stream = browserify(filename).bundle({}, function (err, src) {
      output = src
    });

    return output;

    // -- OR --

    return stream.something...???
  });

  gulp.src(['./js/apps/home.js', './js/apps/property.js'])
    .pipe(bundleApp)
    .pipe(gulp.dest('./dist'));
});

Obviously returning output doesn't work (async).

But I cannot figure out what to return in mapper from the browserify.bundle stream..

[simenbrekken]

@8y5 I've struggled a bit with this myself but I managed getting it working:

https://github.com/gulpjs/plugins/issues/47#issuecomment-37580049

[hughsk]

@8y5 thanks for the thorough explanation of your issue! Sorry to have taken so long to respond, this one must've slipped past me.

The problem you're having here is the vinyl-map has a sync API, whereas browserify has an async API – your bundle will be generated after vinyl-map has checked the return value of the function. vinyl-map currently only works with strings, not streams.

I think vinyl-source-stream is better for what you're trying to do, but if you want multiple bundles it might be nicer to have browserify able to play nice with vinyl-map. I may add support for streams and/or callbacks to this module soon which would fix your issue. Pull requests are welcome if anyone wants to speed this up :)

[sogko]

Hi guys,

This might be an old issue, but I thought I should give an updated answer to help those trying to use browserify while avoiding gulp-browserify.

I think vinyl-transform is more suited for this case (multiple input sources) than vinyl-map (both are lovely libraries by @hughsk)

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var uglify = require('gulp-uglify');

gulp.task('browserify', function () {

  // use `vinyl-transform` to wrap the regular ReadableStream returned by `b.bundle();` with vinyl-fs file object
  // so that we can use it down a vinyl pipeline
  var browserified = transform(function(filename) {
    var b = browserify(filename);
    return b.bundle();
  });

  return gulp.src(['./js/apps/home.js', './js/apps/property.js'])  // or you can try './js/apps/*.js' to browserify every file in that folder as a separate bundle,
    .pipe(browserified)
    .pipe(gulp.dest('./dist'));
});

I'm in the middle of writing a couple more browserify-related gulp recipes for common use-cases, including a basic gulp-browserify replacement at github.com/sogko/gulp-recipes/tree/master/browserify-vanilla. Any comments/improvements/suggestions are welcome!