FAST Browserify + Reactify + Babelify

gulpfile.js

// Update: Hey Folks - I've got a full Gulpfile with everything else over at https://github.com/wesbos/React-For-Beginners-Starter-Files

var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var reactify = require('reactify');
var babelify = require('babelify');
var watchify = require('watchify');
var notify = require('gulp-notify');


function handleErrors() {
  var args = Array.prototype.slice.call(arguments);
  notify.onError({
    title: 'Compile Error',
    message: '<%= error.message %>'
  }).apply(this, args);
  this.emit('end'); // Keep gulp from hanging on this task
}

function buildScript(file, watch) {
  
  var props = {
    entries: ['./scripts/' + file],
    debug : true,
    transform:  [babelify, reactify]
  };

  // watchify() if watch requested, otherwise run browserify() once 
  var bundler = watch ? watchify(browserify(props)) : browserify(props);

  function rebundle() {
    var stream = bundler.bundle();
    return stream
      .on('error', handleErrors)
      .pipe(source(file))
      .pipe(gulp.dest('./build/'));
  }

  // listen for an update and run rebundle
  bundler.on('update', function() {
    rebundle();
    gutil.log('Rebundle...');
  });

  // run it once the first time buildScript is called
  return rebundle();
}


// run once
gulp.task('scripts', function() {
  return buildScript('app.js', false);
});

// run 'scripts' task first, then watch for future changes
gulp.task('default', ['scripts'], function() {
  return buildScript('app.js', true);
});

+1

great, thx

works like a charm, thanks

Great, Thanks a lot !!

Great! This code is correctly using new browserify.bundle() without arguments. Arguments must be set on the constructor.
+1

great !!!

It would be more faster if it includes these properties in the props object. These properties are required for watchify

cache: {},
packageCache: {},
fullPaths: true

Hi!
This takes 7.13 seconds to run on my computer, while

gulp.task('build', function () {
  browserify({
    entries: 'index.js',
    extensions: ['.js'],
    debug: (process.env.NODE_ENV === 'development')
  })
  .transform(babelify)
  .bundle()
  .pipe(source('test1.js'))
  .pipe(buffer())
  .pipe(uglify())
  .pipe(gulp.dest('/var/www/res/dist'));
});

takes 17 ms. Why?

In case you guys need to integrate Sass and Livereload to your gulpfile
https://github.com/angkywilliam/ReactGulpBoilerPlate/blob/master/gulpfile.js

what should be done for multiple bundling?

i just copy and paste this source code but it is not working on me:

Unexpected token (7:1) while parsing file: ...

directories are:
source/app.js
source/lib/math.js

source/lib/math.js:
export const sqrt = Math.sqrt;
export function square(x) {
return x*x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}

source/app.js:
import { square, diag } from './lib/math.js';
console.log(square(11));
console.log(diag(4,3));

//react
ReactDOM.render(
jsx syntax here...,
document.getElementById('app')
);

what is the problem? help will many thanks.