javascript - How to use the new Browserify API?

Question

I am currently working on a ReactJS project, so I decided to setup a workflow using Gulp to manage the uglification, minification, JSX transformation and so on.

The problem is that the Browserify API is constantly changing (the documentation is not being updated quite often) we can no longer use options inside bundle()

As it is stated by the log error message : "Move all option arguments to the Browserify() constructor" But not all the options I am using are available, here is my code for now :

var gulp = require('gulp');
var gutil = require('gulp-util');
var streamify = require('gulp-streamify');
var source = require('vinyl-source-stream');
var del = require('del');

prod = gutil.env.prod;

gulp.task('cleanjs', function(cb) {
  del(['build/js'], cb);
});

gulp.task('cleancss', function(cb) {
  del(['build/css'], cb);
});

gulp.task('sass', ['cleancss'], function() {
    var sass = require('gulp-sass');
    var concat = require('gulp-concat');

    gulp.src(['./src/**/.{css, scss}'])
        .pipe(sass())
        .pipe(concat('livemap.min.css'))
        .pipe(gulp.dest('./build/css'));
});

gulp.task('watch', function() {
    var watchify = require('watchify');
    var reactify = require('reactify');
    var browserify = require('browserify');
    var uglify = require('gulp-uglify');
    var bundler = watchify(browserify('./src/main.js', {
        cache: {},
        packageCache: {},
        fullPaths: true,
        transform: ['reactify'],
        debug: true,
    }));

     function rebundle() {
        var t = Date.now();
        gutil.log('Starting Watchify rebundle');
        return bundler.bundle()
        .pipe(source('bundle.js'))
        .pipe(prod ? streamify(uglify()) : gutil.noop())
        .pipe(gulp.dest('./build/js'))
        .on('end', function () {
            gutil.log('Finished bundling after:', gutil.colors.magenta(Date.now() - t + ' ms'));
        });
    }

    bundler.on('update', rebundle);

    gulp.watch('./src/**/*.{css, scss', ['sass']);

    return rebundle();
});

gulp.task('default', ['watch']);

Any help would be very welcome !

Answer 1

Here's how i do it: https://raw.githubusercontent.com/furqanZafar/reactjs-image-upload/master/gulpfile.js

var options = watchify.args;
options.debug = true;    
var bundler = browserify(options);
bundler.add("./public/scripts/app.js");
bundler.transform("reactify");

var watcher = watchify(bundler);
.
.
.