Last Updated: January 28, 2019
·
9.551K
· steveniseki

using gulp with browserify and watchify

Just started playing around with browserify with Gulp, and it took awhile to get set up correctly, but now I have it, wow... it is really quite awesome.

gulpfile.js browserify task

This was the browserify task I used in my gulpfile

var browserify = require('browserify'),
    gulp = require('gulp');
    watchify = require('watchify'),
    source = require('vinyl-source-stream'),
    sourceFile = './app/scripts/main.js',
    destFolder = './app/scripts/browserify/',
    destFile = 'main.js';

/* browserify */ 
gulp.task('browserify', function() {

  var bundler = browserify({
    entries: sourceFile,
    cache: {}, packageCache: {}, fullPaths: true, debug: true
  });

  var bundle = function() {
    return bundler
      .bundle()
      .on('error', function () {})
      .pipe(source(destFile))
      .pipe(gulp.dest(destFolder));
  };

  if(global.isWatching) {
    bundler = watchify(bundler);
    bundler.on('update', bundle);
  }

  return bundle();
});

npm includes for package.json

And the node modules to include

"browserify": "*",
"watchify": "*",
"vinyl-source-stream": "*",

For more info on using browserify check out this post and for a good starter project try out gulp starter