Running multiple transforms on gulp/browserify bundle

8
votes

I have a React component that I've been exporting to a bundle file. I've been successfully transforming it using babelify, however, I now would like to run envify on it. I can't seem to figure out how to run multiple transforms using browserify. I think it must be possible, but I can't tell if my syntax is slightly off or if I need to write a custom transform or if I should specify the transforms in my package.json. Here is the code in my gulp file:

 var bundleComponent = function(bundler, source, component) {
   //bundler is just browserify('./client/components/TVScheduleTab/render.js')

   gutil.log('Bundling ' + component)

  return bundler
  //this throws an error
    .transform(babelify, envify({
      NODE_ENV: 'production'
    }))
    .bundle()
    .on('error', function(e){
      gutil.log(e);
    })
    .pipe(source)
    .pipe(gulp.dest('output/'));
};
2
node.jsreactjsgulpbrowserify

2 Answers

3
votes

Have you tried chaining? Correct solution is in comments

 var bundleComponent = function(bundler, source, component) {
   //bundler is just browserify('./client/components/TVScheduleTab/render.js')

   gutil.log('Bundling ' + component)

  return bundler
  //this throws an error
    .transform(babelify)
    .transform(envify({
      NODE_ENV: 'production'
    }))
    .bundle()
    .on('error', function(e){
      gutil.log(e);
    })
    .pipe(source)
    .pipe(gulp.dest('output/'));
};
2
votes

Although this answer appears after the accepted answer, and the accepted somewhat covers the question, I wanted to make it clear without the need to navigate through the linked github issue.

Chaining, in particular with envify, should look like:

// NOTE: the "custom" part
var envify = require('envify/custom');

gulp.task('build-production', function() {
    browserify(browserifyOptions)
        .transform(babelify.configure(babelifyOptions))
        .transform(envify({
            NODE_ENV: 'production'
        }))
        .bundle()
        .on('error', handleErrors)
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(uglify({ mangle: false }))
        .pipe(gulp.dest('./build/production/js'));
});