[SOLVED] Running multiple transforms using browserify with gulp

Running multiple transforms using browserify with gulp

I'm using browserify with gulp to bundle the javascript code in my web application, and I'm using babelify to transform the code to be es6 compatible as follows.

gulp.task('js',function(){
var bundleStream = browserify(config.paths.mainJs)
    .transform("babelify", {presets: ["es2015", "react"]})
    .bundle()
    .on('error',console.error.bind(console))

bundleStream
    .pipe(source('compiled.js'))
    .pipe(buffer())
    .pipe(uglify())
    .pipe(rename('compiled.min.js'))
    .pipe(gulp.dest(config.paths.dist + '/js'))
});

Now, I realized that I need to use browserify-shim, and according to the doc the way to use it is including into package.json the following json:

{ 
    "browserify": {
    "transform": [ "browserify-shim" ]
    }
}

Is there a way to use multiple transforms using gulp?

If (yes) {

what is the right syntax? And in this case, does the order in which they are specified matter in order to create the final bundle?

}

else {

If I specify then the shim transform into the package.json, but I keep the babelify transform into the gulpfile, there would be problems when browserify generates the final bundle? Would be both transforms executed?

}

Thank you!!

Solution

I'm guessing your setup is fine, but it's clearer and easier to understand what's happening if all your transforms are in the same place. I'd put them in your gulpfile, and make your babelify transform come before your browserify-shim transform:

var browserifyShim = require('browserify-shim'); // <--require statement at top
// gulp.task...........
var bundleStream = browserify(config.paths.mainJs)
    .transform("babelify", {presets: ["es2015", "react"]})
    .transform(browserifyShim) // <-- put your browserify-shim transform here.
    .bundle()
    .on('error',console.error.bind(console))
// Rest of gulpfile