Configuring watchify and browserify to re-run only the required files

Question

I started working on a chrome extension. So far I setup the project using gulp to watch the folder containing the code for background, popup, content and a few other pages. Each component shares some some code with the others.

The problem is that every time I edit a file watchify will trigger a full rebuild.

I have tried to limit the browserify process to only handle the files that have changed. It works very well for root scripts (popup.js, background.js, content.js)... But unfortunately I have no way of tracking dependencies (files required by the root scripts or their dependencies) and this strategy fails when a dependency is edited.

So here is my question is there a good strategy to automatically update any dependent script upon change while avoiding a full browserify of the entire tree?

gulp.task('babel', () => {
  buildingTasks.start('babel');
  return gulp.src(scriptSrc)
  .pipe(through2.obj(function (file, enc, next){
    var b = browserify(file.path, {
      debug: (process.env.NODE_ENV === 'development')
    });
    b.transform(babelify, {presets: ['es2015', 'react']});
    b.bundle(function(err, res){
      if (err) return next(err);
      file.contents = res;
      next(null, file);
    });
  }))
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write('map'))
  .pipe(gulp.dest(scriptDest))
});

I have found this answer to access the dependencies list, but it would require building a dependency tree by hand, storing it somewhere and updating it every time a build is triggered. Is there a better solution?

cartant cartant · Accepted Answer · 2017-01-10T19:48:37

For Browserify to watch the bundled files, you need to configure Watchify:

var browserify = require('browserify');
var watchify = require('watchify');

...

var options = Object.assign({}, watchify.args, {
  debug: (process.env.NODE_ENV === 'development')
});
var b = watchify(browserify(file.path, options));

The watchify methods wrap the Browserify bundler and provides some shared arguments via options that are used to determine which files need to be watched. It returns the same bundler that would have been returned by browserify.

Configuring watchify and browserify to re-run only the required files

1 Answers