Gulpfile with watch for React and Browserify

I had some problems with watchify to create a gulp build for react and browserify where the bundle would be updated when a source file is changed. So here is a one way to arrange a build file with watch.

var source = require('vinyl-source-stream'),
    gulp = require('gulp'),
    browserify = require('browserify'),
    reactify = require('reactify'),
    notify = require('gulp-notify');

var sourcesDir = './ui/jsx',
    appEntryPoint = "app.js",
    targetDir = './src/main/webapp';


gulp.task('default', function() {
  return browserify({entries: [sourcesDir + '/' + appEntryPoint], debug: true})
    .transform(reactify)
    .bundle()
    .pipe(source(appEntryPoint))
    .pipe(gulp.dest(targetDir))
    .pipe(notify("Bundling done."));
});

gulp.task('watch', function() {
  gulp.watch(sourcesDir + '/' + "*.js", ['default']);
});