gulp-react-bundle

This is a JavaScript build tool that compiles our JavaScript code into a single file.

It adds these featuers to the Browserify Bundle:

* JSX
* ES6
* Source Maps

It is made for these features:

* Automatic Watchify
* External Libraries (that don't get compiled into other libraries)

Installation

This will install thebundle from the github repo and save it into package.json.

npm install gulp-react-bundle --save-dev

Usage

Create gulpfile.js in the root directory of your project.

var gulp = require('gulp');
var bundle = require('gulp-react-bundle');

gulp.task('build', function() {
  bundle('./js/alpha.js', './build/alpha.js');
});

gulp.task('build-with-dependency', function() {
  var lib = bundle.lib(['lodash', 'jquery'], './build/alpha.js');
  bundle('./js/app.js', './build/app.js', lib);
});

To build

gulp build

To build for production

gulp build --production

Hint

To make it the default task, just name the gulp task default.

gulp.task('default', function () {
  bundle('./js/alpha.js', './build/alpha.js');
})

bundle(src, dest, externals)

src is the source file. Can be a String or an Array of Strings.

dest is the destination file. Must be a String.

externals (optional) are the externals or modules and libraries to exclude. These arguments can either be a String, a bundle object as returned from the method call to bundle or an Array (which contains String or bundle objects).

bundle.lib(src, dest, externals)

Apart from externalizing the src files, bundle.lib works the same as bundle.

Known Issues

• You must explicitly specify the modules in bundle.lib. You cannot assume that just because your source bundle requires another bundle, that the second bundle will automatically be exposed.

• The first time the bundle is created, the externals are not removed. This is a weird bug which I'll address later. In the meantime, the fact that additional rebundles in a watchify will happen MUCH faster is worth it.