Notes

Gulp & Browserify Revisited

14 Jul 2014

In my previous post I wrote about React, Browserify & Gulp since it was written gulp-browserify has been blacklisted and browserify has announced a security notice around one of its dependencies - syntax-error.

So in reaction I’ve modified my build to use browserify directly and pipe it to gulp using vinyl-source-stream. vinyl-source-stream allows the use of conventional text streams (so browserify’s output) as a starting point for a gulp pipeline.

Removed the rot:

npm uninstall gulp-browserify --save-dev

Installed vinyl-source-stream and browserify:

npm install browserify --save-dev
npm install vinyl-source-stream --save-dev

Updated the package.json file to tell browserify to use the reactify transformer (note that this was previously done in the gulp file task generator):

  "browserify": { 
    "transform": [ "reactify" ] 
  }

Added depenencies on vinyl-source-stream and browserify to the gulpfile.js:

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

The updated task generator function:

var createJsxTask = function(component) {
  return function () {
    return browserify('./components/' + component + '.jsx')
    .bundle().pipe(source(component + '.js'))
    .pipe(gulp.dest('dist'));
  };
};