gulpfile.js

'use strict';

var gulp        = require('gulp');                // Base gulp package
var babelify    = require('babelify');            // Used to convert ES6 & JSX to ES5
var browserify  = require('browserify');          // Providers "require" support, CommonJS
var notify      = require('gulp-notify');         // Provides notification to both the console and Growel
var rename      = require('gulp-rename');         // Rename sources
var sourcemaps  = require('gulp-sourcemaps');     // Provide external sourcemap files
var livereload  = require('gulp-livereload');     // Livereload support for the browser
var gutil       = require('gulp-util');           // Provides gulp utilities, including logging and beep
var chalk       = require('chalk');               // Allows for coloring for logging
var source      = require('vinyl-source-stream'); // Vinyl stream support
var buffer      = require('vinyl-buffer');        // Vinyl stream support
var watchify    = require('watchify');            // Watchify for source changes
var merge       = require('utils-merge');         // Object merge tool
var duration    = require('gulp-duration');       // Time aspects of your gulp process

var config = {
    js: {
        src   : 'app.js',
        watch : './lib/js/',
        output : {
            dir  : './dist/',
            file : 'build.js'
        }
    }
}

// Error reporting function
function mapError(err) {
    if (err.fileName) {
        // Regular error
        gutil.log(chalk.red(err.name)
        + ': ' + chalk.yellow(err.fileName.replace(__dirname + '/src/js/', ''))
        + ': ' + 'Line ' + chalk.magenta(err.lineNumber)
        + ' & ' + 'Column ' + chalk.magenta(err.columnNumber || err.column)
        + ': ' + chalk.blue(err.description));
    } else {
        // Browserify error
        gutil.log(chalk.red(err.name)
        + ': '
        + chalk.yellow(err.message));
    }
}

// Completes the final file outputs
function bundle(bundler) {

    var bundleTimer = duration('Javascript bundle time');

    bundler.bundle()
        .on('error', mapError)                                      // Map error reporting
        .pipe(source(config.js.src))                                // Set source name
        .pipe(buffer())                                             // Convert to gulp pipeline
        .pipe(rename(config.js.output.file))                        // Rename the output file
        .pipe(sourcemaps.init({loadMaps: true}))                    // Extract the inline sourcemaps
        .pipe(sourcemaps.write('./map'))                            // Set folder for sourcemaps to output to
        .pipe(gulp.dest(config.js.output.dir)                       // Set the output folder
        .pipe(notify({
            message: 'Generated file: <%= file.relative %>',
        }))                                                         // Output the file being created
        .pipe(bundleTimer)                                          // Output time timing of the file creation
        .pipe(livereload());                                        // Reload the view in the browser
}

// Gulp task for build
gulp.task('default', function() {

    // Merge in default watchify args with browserify arguments
    var args = merge(watchify.args, { debug: true });
    
    // Browserify
    var bundler = browserify('./app.js', args)
        .plugin(watchify, {ignoreWatch: ['**/node_modules/**']})    // Watchify to watch source file changes
        .transform(
            babelify, {presets: ['es2015', 'react', 'stage-0']}     // Babelify plugins, Use caution with stage-0 (experimental presets),
        );                                                          // Learn more here: http://babeljs.io/docs/plugins/

    // Run the bundle the first time 
    // *Required for Watchify to kick in
    bundle(bundler);                                                

    // Re-run bundle on source updates
    bundler.on('update', function() {
        bundle(bundler);
    });

});

package.json

{
  "name": "sample-browserify",
  "version": "1.0.0",
  "description": "Sample Browserify / Gulp Compiler",
  "main": "app.js",
  "author": "[email protected]",
  "dependencies": {
    "babel-plugin-react-require": "^2.1.0",
    "babel-preset-stage-0": "^6.3.13",
    "babel-preset-es2015": "^6.1.2",
    "babel-preset-react": "^6.1.2",
    "babelify": "^7.2.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "browserify": "^13.0.0",
    "chalk": "^1.1.1",
    "gulp": "^3.9.1",
    "gulp-duration": "0.0.0",
    "gulp-livereload": "^3.8.1",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-envify": "^1.0.0",
    "gulp-util": "^3.0.7",
    "uglifyify": "^3.0.1",
    "utils-merge": "^1.0.0",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0",
    "watchify": "^3.6.0"
  }
}