Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Gulp + browserify + babelify + react
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)
.pipe(gulpif(argv.production, buffer())) // Stream files
.pipe(gulpif(argv.production, uglify()))

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.


gulp build-react

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


gulp build-react --production

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

More info

"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": {}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment