Gulp + browserify + babelify + react

gulpfile.js

var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var gulp = require('gulp');
var browserify = require('browserify');         // 
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');

/**
 * Build an output file. Babelify is used to transform 'jsx' code to JavaScript code. 
 **/
gulp.task("build-react", function(){
    var options = {
        entries: "./scripts/main.js",   // Entry point
        extensions: [".js"],            // consider files with these extensions as modules 
        debug: argv.production ? false : true,  // add resource map at the end of the file or not
        paths: ["./scripts/"]           // This allows relative imports in require, with './scripts/' as root
    };

    return browserify(options)
        .transform(babelify)
        .bundle()
        .pipe(source("main.min.js"))
        .pipe(gulpif(argv.production, buffer()))    // Stream files
        .pipe(gulpif(argv.production, uglify()))
        .pipe(gulp.dest("./build"));
});

GulpReactBrowserifyBabelify.md

Use React with Gulp, Browserify and Babelify. This allows you to use React in jsx & node.js style. It let's you use require('module') in your JavaScript. Babelify will transform the jsx code to JavaScript code.

Development

gulp build-react

This will generate a main.min.js file in the build directory with sourcemaps.

Production

gulp build-react --production

This will exclude the sourcemaps and will minify your output file.

More info

• React
• Browserify
• Babelify
• Uglify
• Vinyl Buffer
• Gulp If
• Yargs

package.json

{
  "dependencies": {
    "react": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "devDependencies": {
    "gulp": "^3.8.5",
    "babelify": "^6.4.0",
    "browserify": "^12.0.0",
    "gulp-if": "^1.2.5",
    "gulp-uglify": "^1.4.2",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "yargs": "^3.29.0"
  },
  "engines": {
    "node": ">=0.12.0"
  },
  "private": true,
  "scripts": {}
}