sick-sad-world
3/6/2017 - 8:05 PM

Gulp task to make browserify build with HMR included

Gulp task to make browserify build with HMR included

const gulp = require('gulp');
const browserify = require('browserify');
const sourcemaps = require('gulp-sourcemaps');
const babelify = require('babelify');
const buffer = require('vinyl-buffer');
const source = require('vinyl-source-stream2');
const watchify = require('watchify');
const livereactload = require('livereactload');
const gutil = require('gulp-util');

gulp.task('react-hmr', () => {
  let b = browserify({
    entries: 'assets/src/app.js',
    cache: {},
    packageCache: {},
    debug: true,
    extensions: ['.js', '.jsx'],
    plugin: [watchify, livereactload],
  }).bundle();
  
  b.on('update', () => {
    gutil.log('Rerunning browserify...');
    const updateStart = Date.now();
    _build().on('end', () => gutil.log(`...Done ${Date.now() - updateStart} ms`));
  });
  
  let _build = () => {
    b.bundle()
      .on('error', (err) => gutil.log(err.stack))
      .pipe(source('app.js'))
      .pipe(buffer())
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('assets/js/app.js'))
  };
  
  return _build();
})