browserify recipe breaks when using transforms

[jamestalmage]

The gulp recipe for browserify makes use of vinyl-transform, but I've found it not to be the best option.

Specifically it breaks whenever I add any sort of transform to the browserify bundling process.

See this reproduction.

vinyl-transform breaks down when coffeeify gets added to the mix, while vinyl-source-stream handles it like a champ.

I am developing a browserify transform and have found it to be incompatible with vinyl-transform as well.

I have a few questions:

1. Is there some advantage to vinyl-transform over vinyl-source-stream?
2. Is this a fixable issue?
3. Would it be better to update the recipe to use vinyl-source-stream so gulp & browserify noobs are not banging their heads against the wall when their build breaks because they tried to use a browserify transform?

[hughsk]

1. You can use it to create multiple browserify bundles more easily, but otherwise the difference for browserify is just semantic.
2. Sadly, I have no idea what's causing it to break in this case. I suspect it's something in browserify but I'm not sure. How does it break? Does it throw an error, does it not transform the first file, does it hang, or does it just output an empty file?
3. If browserify transforms are broken with vinyl-transform I'd recommend just using vinyl-source-stream.

There have been maybe one or two occasions in the last three-ish years where I've needed more than one browserify bundle, so I'd personally recommend sticking with vinyl-source-stream as the default approach. I don't want to get caught up in the debate though, it seems people keep disagreeing on this one :(

[jamestalmage]

I don't want to get caught up in the debate though, it seems people keep disagreeing on this one :(

The debate around integrating gulp with browserify just baffles me. That it's to the point where people (especially prolific authors who have contributed as much as yourself) would rather disengage is troubling.

I apologize for not including the console dump. That was silly of me. Also, my reproduction is truly minimal (just look at the last two gulp tasks - I wrote the rest before I discovered the controversy surrounding gulp-browserify).

git clone https://github.com/jamestalmage/coffeeify-issue.git
cd coffeeify-issue
npm install
gulp vinyl-transform

console dump:

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: write after end
    at writeAfterEnd (/Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:161:12)
    at Labeled.Writable.write (/Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/node_modules/readable-stream/lib/_stream_writable.js:208:5)
    at /Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/index.js:283:27
    at Array.forEach (native)
    at resolved (/Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/index.js:282:28)
    at /Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/index.js:314:13
    at /Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/node_modules/resolve/lib/async.js:44:21
    at ondir (/Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/node_modules/resolve/lib/async.js:187:31)
    at /Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/node_modules/resolve/lib/async.js:153:39
    at onex (/Users/jamestalmage/WebstormProjects/coffeeify-issue/node_modules/browserify/node_modules/resolve/lib/async.js:93:22)

[stoikerty]

I really like how simple and straightforward the gulp recipe is using vinyl-transform, but sadly I'm having the same issue.

Here is my recipe:

// Excerpt from `../config`
// ------------------------
// javascript: {
//   src: src + '/javascript_app/**/*.{js,coffee}',
//   rootFiles: [
//     src + '/javascript_app/app.js',
//     src + '/javascript_app/test.js'
//   ],
//   dest: dest + '/js'
// },

// The gulp recipe
// ------------------------
var gulp       = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var browserify = require('browserify');
var reactify   = require('reactify');
var transform  = require('vinyl-transform');
var uglify     = require('gulp-uglify');
var config     = require('../config');

gulp.task('javascript', function () {
  var browserified = transform(function(filename) {
    var b = browserify({
        entries: filename, // Only need initial file, browserify finds the deps
        //transform: [reactify], // We want to convert JSX to normal javascript
        debug: true // Gives us sourcemapping
    });

    //b.transform(reactify);

    return b.bundle();
  });

  return gulp.src(config.javascript.rootFiles) 
    .pipe(browserified)
    .pipe(sourcemaps.init({loadMaps: true}))
      .pipe(uglify())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(config.javascript.dest));
});

• Log without transforms

D:\repos\my_repo>gulp javascript
[09:54:27] Using gulpfile D:\repos\my_repo\gulpfile.js
[09:54:27] Starting 'javascript'...
[09:54:30] Finished 'javascript' after 3.41 s

• When using the first transform method (when creating b variable)
• or when using the second transform method b.transform(reactify);

D:\repos\my_repo>gulp javascript
[09:54:38] Using gulpfile D:\repos\my_repo\gulpfile.js
[09:54:38] Starting 'javascript'...
events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: write after end
    at writeAfterEnd (D:\repos\my_repo\node_modules\browserify\node_modules\readable-stream\lib\_stream_writable.js:161:12)
    at Labeled.Writable.write (D:\repos\my_repo\node_modules\browserify\node_modules\readable-stream\lib\_stream_writable.js:208:5)
    at Producer.ondata (_stream_readable.js:540:20)
    at Producer.emit (events.js:107:17)
    at Producer.Readable.read (_stream_readable.js:373:10)
    at flow (_stream_readable.js:750:26)
    at resume_ (_stream_readable.js:730:3)
    at _stream_readable.js:717:7
    at process._tickCallback (node.js:355:11) 

I depend on transforms so will have to use vinyl-source-stream for now.

[stoikerty]

If anyone stumbles onto the same issue looking for a solution, I've created a gist that uses vinyl-source-stream and vinyl-buffer to recreate the same functionality as my recipe above that uses vinyl-transform.

I tried keeping it as simple as possible, it is mostly adapted from @sogko's great article about gulp, browserify and vinyl. It includes react JSX, coffeescript, uglify & sourcemaps and supports multiple input & output files.

[jamestalmage]

Make sure to also look at https://github.com/jamestalmage/coffeeify-issue/pull/1

[pikeas]

@hughsk Any suggestions on how to do this with vinyl-transform?