Conditionally running transform on browserify - gulp

Question

I have added the babelify transformation and i've noticed that my mainScripts task now takes around 10 seconds instead of 0.5s as before.
I would therefore like to apply .transform("babelify", {presets: ["es2015"]}) only when the environment is or prod in order to speed up the task during development.
My function for determining the current environment
var isLocal = function() {
return argv.env === 'localdev' || argv.env === 'dev';
};
My scripts task:
gulp.task('mainScripts', function() {
return browserify('./app/app.js', {
debug: true
})
.transform("babelify", {presets: ["es2015"]})
.bundle()
.on('error', function(err) {
console.log(err.toString());
this.emit("end");
})
.pipe(source('main.js'))
.pipe(buffer())
.pipe(gulpif(!condition, sourcemaps.init({
loadMaps: true
})))
.pipe(ngAnnotate())
.pipe(gulpif(!condition, uglify({
mangle: true
}).on('error', gutil.log)))
.pipe(gulpif(!condition, sourcemaps.write('./')))
.pipe(gulp.dest('./dist/js/')).
pipe(gulpif(isLocal(), connect.reload()));
});
How can this be achieved?

Answer 1

The call to browserify returns the bundler and the transform call is just chained off that, so you can optionally call transform by doing something like this:
gulp.task('mainScripts', function() {
var bundler = browserify('./app/app.js', {
debug: true
});
if (!isLocal()) {
bundler = bundler.transform("babelify", { presets: ["es2015"] });
}
return bundler
.bundle()
.on('error', function(err) {
...
}
...
Alternatively, you could have a look for some gulp recipes for watchify, which should greatly improve your incremental build times.

Answer 2

How about using .plugin?
var babelify = function (b) {
return isLocal()
? b
: b.transform("babelify", {presets: ["es2015"]});
};
// .plugin(babelify)
browserify Plugins section says: plugin take the bundle instance as their first parameter
For some more advanced use-cases, a transform is not sufficiently extensible. Plugins are modules that take the bundle instance as their first parameter and an option hash as their second.
Applying plugin will be formatted like this:
var babelify = function (b) {
return isLocal()
? b
: b.transform("babelify", {presets: ["es2015"]});
};
gulp.task('mainScripts', function() {
return browserify('./app/app.js', {
debug: true
})
.plugin(babelify)
.bundle()
.on('error', function(err) {
...
}
...