Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Apply prettier Apr 10, 2017 Add browserify, babel, react, jsx, example Feb 20, 2015
gulpfile.js Apply prettier Apr 10, 2017
package.json Update listing for new recipe Jul 1, 2015 compiled files Aug 9, 2016

#Browsersync - Browserify, Babelify + Watchify + Sourcemaps Example


To try this example, follow these 4 simple steps.

Step 1: Clone this entire repo

$ git clone bs-recipes

Step 2: Move into the directory containing this example

$ cd bs-recipes/recipes/gulp.browserify

Step 3: Install dependencies

$ npm install

Step 4: Run the example

$ npm start

Additional Info:

This one is a beast. Write your React JSX code, in ES6, compiled by Browserify and auto-reload all devices when the compilation is complete.

Preview of gulpfile.js:

var gulp        = require('gulp');
var gutil       = require('gulp-util');
var source      = require('vinyl-source-stream');
var babelify    = require('babelify');
var watchify    = require('watchify');
var exorcist    = require('exorcist');
var browserify  = require('browserify');
var browserSync = require('browser-sync').create();

// Watchify args contains necessary cache options to achieve fast incremental bundles.
// See watchify readme for details. Adding debug true for source-map generation.
watchify.args.debug = true;
// Input file.
var bundler = watchify(browserify('./app/js/app.js', watchify.args));

// Babel transform
    sourceMapRelative: 'app/js'

// On updates recompile
bundler.on('update', bundle);

function bundle() {

    gutil.log('Compiling JS...');

    return bundler.bundle()
        .on('error', function (err) {
            browserSync.notify("Browserify Error!");
        .pipe({once: true}));

 * Gulp task alias
gulp.task('bundle', function () {
    return bundle();

 * First bundle, then serve from the ./app directory
gulp.task('default', ['bundle'], function () {
        server: "./app"