javascriptgulpreactjsbrowserifywatchify

gulp browserify reactify task is quite slow


I am using Gulp as my task runner and browserify to bundle my CommonJs modules.

I have noticed that running my browserify task is quite slow, it takes around 2 - 3 seconds, and all I have is React and a few very small components I have built for development.

Is there a way to speed up the task, or do I have any noticeable problems in my task?

gulp.task('browserify', function() {
  var bundler = browserify({
    entries: ['./main.js'], // Only need initial file
    transform: [reactify], // Convert JSX to javascript
    debug: true, cache: {}, packageCache: {}, fullPaths: true
  });

  var watcher  = watchify(bundler);

  return watcher
  .on('update', function () { // On update When any files updates
    var updateStart = Date.now();
        watcher.bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
        console.log('Updated ', (Date.now() - updateStart) + 'ms');
  })
  .bundle() // Create initial bundle when starting the task 
  .pipe(source('bundle.js'))
  .pipe(gulp.dest('./'));
});

I am using Browserify, Watchify, Reactify and Vinyl Source Stream as well as a few other unrelated modules.

var browserify = require('browserify'),
watchify = require('watchify'),
reactify = require('reactify'),
source = require('vinyl-source-stream');

Thanks


Solution

  • See fast browserify builds with watchify. Note that the only thing passed to browserify is the main entry point, and watchify's config.

    The transforms are added to the watchify wrapper.

    code from article pasted verbatim

    var gulp = require('gulp');
    var gutil = require('gulp-util');
    var sourcemaps = require('gulp-sourcemaps');
    var source = require('vinyl-source-stream');
    var buffer = require('vinyl-buffer');
    var watchify = require('watchify');
    var browserify = require('browserify');
    
    var bundler = watchify(browserify('./src/index.js', watchify.args));
    // add any other browserify options or transforms here
    bundler.transform('brfs');
    
    gulp.task('js', bundle); // so you can run `gulp js` to build the file
    bundler.on('update', bundle); // on any dep update, runs the bundler
    
    function bundle() {
      return bundler.bundle()
        // log errors if they happen
        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
        .pipe(source('bundle.js'))
        // optional, remove if you dont want sourcemaps
          .pipe(buffer())
          .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file
          .pipe(sourcemaps.write('./')) // writes .map file
        //
        .pipe(gulp.dest('./dist'));
    }