Gulp + React

gulpfile.js

var gulp       = require('gulp');
var connect    = require('gulp-connect');
var sourcemaps = require('gulp-sourcemaps');
var source     = require('vinyl-source-stream');
var buffer     = require('vinyl-buffer');
var browserify = require('browserify');
var babel      = require('babelify');

function compile() {
  console.log('-> bundling...');

  browserify('./src/index.jsx', { debug: true }).transform(babel, {presets: ["es2015", "react"]})
    .bundle()
    .on('error', function(err) { console.error(err); this.emit('end'); })
    .pipe(source('app.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./js'))
    .pipe(connect.reload());
}

gulp.task('connect', () => {
  connect.server({
    root: './',
    livereload: true
  });
});

gulp.task('watch', () => {
  gulp.watch(['./src/*.jsx'], () => { return compile(); });
});

gulp.task('build', () => { return compile(); });

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

package.json

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "foo",
  "contributors": [
    {
      "name": "Go Tanaka",
      "email": "tanago3@gmail.com"
    }
  ],
  "devDependencies": {
    "gulp": "3.9.1",
    "gulp-connect": "5.0.0",
    "gulp-sourcemaps": "2.2.0",
    "vinyl-source-stream": "1.1.0",
    "vinyl-buffer": "1.0.0",
    "babelify": "7.3.0",
    "gulp-atomizer": "2.0.0",
    "browserify" : "13.1.1",
    "react":"15.3.2",
    "react-dom":"15.3.2",
    "gulp-babel": "6.1.2",
    "babel-preset-es2015": "6.18.0",
    "babel-preset-react": "6.16.0"
  }
}