gulpfile.js with browserify, reactify, watchify and gulp-notify.

gulpfile.js

var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var reactify = require('reactify');
var watchify = require('watchify');
var notify = require("gulp-notify");

var scriptsDir = './scripts';
var buildDir = './build';


function handleErrors() {
  var args = Array.prototype.slice.call(arguments);
  notify.onError({
    title: "Compile Error",
    message: "<%= error.message %>"
  }).apply(this, args);
  this.emit('end'); // Keep gulp from hanging on this task
}


// Based on: http://blog.avisi.nl/2014/04/25/how-to-keep-a-fast-build-with-browserify-and-reactjs/
function buildScript(file, watch) {
  var props = {entries: [scriptsDir + '/' + file]};
  var bundler = watch ? watchify(props) : browserify(props);
  bundler.transform(reactify);
  function rebundle() {
    var stream = bundler.bundle({debug: true});
    return stream.on('error', handleErrors)
    .pipe(source(file))
    .pipe(gulp.dest(buildDir + '/'));
  }
  bundler.on('update', function() {
    rebundle();
    gutil.log('Rebundle...');
  });
  return rebundle();
}


gulp.task('build', function() {
  return buildScript('main.js', false);
});


gulp.task('default', ['build'], function() {
  return buildScript('main.js', true);
});

package.json

{
  "name": "scripts",
  "version": "0.0.0",
  "description": "",
  "main": "gulpfile.js",
  "devDependencies": {
    "envify": "~1.2.1",
    "react": "~0.10.0",
    "browserify": "~4.2.0",
    "gulp": "~3.8.5",
    "gulp-notify": "~1.4.0",
    "gulp-util": "~2.2.19",
    "reactify": "~0.13.1",
    "vinyl-source-stream": "~0.1.1",
    "watchify": "~0.10.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

For anyone that found this repo, this is the correct way to use react + browserify + gulp. Other approaches do silly things, having a browserify transform (with vinyl-source-stream) is the way to go.

getting
'[gulp] 'bundle:js' errored after 17 ms bundle() no longer accepts option arguments.
Move all option arguments to the browserify() constructor.
'

Im using some newer versions of watchify and browserify, which means I had to tweak the gulpfile a little.

{
 ...
  "dependencies": {
    "es6-promise": "^1.0.0",
    "firebase-client": "tinj/firebase-client",
    "firebase-simple-login": "tinj/firebase-simple-login",
    "flux": "^2.0.1",
    "jquery": "^2.1.1",
    "material-ui": "^0.1.21",
    "q": "^1.0.1",
    "react": "^0.11.0",
    "react-router": "^0.9.0",
    "request": "^2.40.0"
  },
  "devDependencies": {
    "browserify": "^6.0.0",
    "envify": "~3.0.0",
    "gulp": "^3.8.7",
    "gulp-jshint": "^1.8.4",
    "gulp-less": "^1.3.6",
    "gulp-notify": "^2.0.0",
    "gulp-util": "^3.0.1",
    "jest-cli": "^0.1.5",
    "jshint-stylish": "^0.4.0",
    "lodash": "^2.4.1",
    "mock-promises": "0.0.3",
    "reactify": "^0.14.0",
    "statics": "~0.1.0",
    "uglify-js": "^2.4.13",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "^2.0.0"
  },
 ...
}

So here's the main change to the gulpfile.js

function buildScript(file, watch) {
    var props ={entries: [scriptsDir + '/' + file], debug: true, cache: {}, packageCache: {}};
    var bundler = watch ? watchify(browserify(props)) : browserify(props);
...

I hope this helps others. Thanks for this gulpfile :)

gulp-notify (v2.0.1) now closes the stream for you, as it should have done the whole time. This means you can use a simpler syntax.

I've updated the example gulpfile with the changes from @mwq27 and with using latest gulp-notify here: https://gist.github.com/mikaelbr/54b02412fc651d4e5c9a

passing those props into watchify gives me:

TypeError: Cannot read property 'cache' of undefined

I've created a gulpfile with watch for React and Browserify application. I had problems with watchify so I skipped that entirely and used gulp.watch for watching the changes. My version is here:

https://gist.github.com/hequ/79fb775412ea4d044fdd

I was getting TypeError: Cannot read property 'cache' of undefined and something else about bundle() arguments.
It is now necessary to watch a browserify instance: watchify(browserify(props)). Official docs seem to suggest that too.

My buildScript function looks like this:

function buildScript(file, watch) {
    var props = {
        entries: [scriptsDir + '/' + file],
        debug: true,
        cache: {},
        packageCache: {},
    };
    var bundler = watch ? watchify(browserify(props)) : browserify(props);
    bundler.transform(reactify);
    function rebundle() {
        var stream = bundler.bundle();
        return stream.on('error', console.log.bind(console))
            .pipe(source(file))
            .pipe(gulp.dest(buildDir + '/'));
    }
    bundler.on('update', function() {
        rebundle();
        gutil.log('Rebundle...');
    });
    return rebundle();
}

@paulftw your solution still does not work with 3.2.1

@nvartolomei I'm pretty sure docs for watchify state that you should add cache: {} and packageCache: {} to browserify props.

@paulftw @nvartolomei are you using gulp-browserify instead of browserify ?
I had the same problem before. Then I realized that I have to use browserify instead gulp-browserify, which have been blacklisted by gulp community

Looks like watchify has changed - you need to wrap an existing browserify. I hit a few more issues as well - some might want to see mine:

https://gist.github.com/wesbos/52b8fe7e972356e85b43

You can use gulp-bro which takes care of incremental build under the hood:

gulp.task('build', () => {
  return gulp.src('main.js')
    .pipe(bro({ error: handleErrors })
    .pipe(gulp.dest(buildDir))
})

gulp.task('default', ['build'], () => {
  gulp.watch(scriptsDir + '/*.js', ['build'])
})

Is there an advantage of using watchify() over gulp-watch()?

@obouchari incremental builds and thus reduced time to build each change.