Improve incompatible stream error

I’m updating a script to match what is suggested via a recipe for using gulp + broswerify. The fact that it is browserify matters little, but illustrates the problem that I think needs to be addressed.

In the recipe it suggests using vinyl-source-stream. I did not initially include this dependency as I try to keep my toolchain as minimal as possible. The error output was this:

$ gulp scripts
[10:36:08] Using gulpfile ~/Dropbox/Development/github/lunch-and-learn-js/projects/gulp-yarn/gulpfile.js
[10:36:08] Starting 'clean-dist'...
[10:36:08] Finished 'clean-dist' after 5.4 ms
[10:36:08] Starting 'scripts'...
path.js:7
    throw new TypeError('Path must be a string. Received ' + inspect(path));
    ^

TypeError: Path must be a string. Received undefined
    at assertPath (path.js:7:11)
    at Object.resolve (path.js:1146:7)
    at DestroyableTransform.saveFile [as _transform] (~/projects/gulp-yarn/node_modules/vinyl-fs/lib/dest/index.js:36:26)
    at DestroyableTransform.Transform._read (~/projects/gulp-yarn/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (~/projects/gulp-yarn/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at doWrite (~/projects/gulp-yarn/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:237:10)
    at writeOrBuffer (~/projects/gulp-yarn/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:227:5)
    at DestroyableTransform.Writable.write (~/projects/gulp-yarn/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:194:11)
    at Readable.ondata (~/projects/gulp-yarn/node_modules/readable-stream/lib/_stream_readable.js:612:20)

The above error does very, very little to tell you “hey, this not compatible with gulp’s streams”. Path must be string (I have a string path) and Received undefined are not clear enough to help me debug. The fix was simple including vinyl-source-stream and doing:

gulp.task('scripts', ['clean-dist'], () => {
  return browserify('src/scripts/main.js')
          .bundle()
          .pipe(source('app.js'))  // add this line, gulp is again happy.
          .pipe(
            gulp.dest('./dist')
          );
});

The problem is that gulp is typically superior to alternatives like grunt in that it is minimal & easy to reason about. Ideally you would get an error indicating that the file stream is incorrect, OR gulp would handle the conversion to a stream for you.

I initially added gulp-browserify, but saw that it is deprecated and encouraged the above recipe instead. Using npm modules directly is another win, so long as debugging doesn’t suffer.

Thanks!

[phated]

vinyl-fs@latest can be dropped in to gulp 3.x and used directly. It has breaking changes and can’t be backported into gulp 3.x but you can use it as long as you use the vinyl-fs docs instead of gulp 3.x (due to those breaking changes).

An aside: I don’t believe a selling point has ever been easier debugging because streams are generally a nightmare in nodejs. I’ve been attempting to make improvements for our next major release but I don’t believe it’ll be perfect.

[benjaminapetersen]

Cool, thx, might give it a spin.