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"
}

@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.