Install Gulp Browserify Gives Error Always

Catching Browserify parse error (standalone option)

The on('error') event is still fired. However, browserify stream is a bit different from other Gulp stream. In the error handler function of browserify, you need to explicitly call this.emit("end")

An example gulp task

var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
var reactify = require('reactify');

gulp.task('browserify', function(){
  // create new bundle
  var b = browserify();
  // add transform if you want
  b.transform(reactify);
  // add file to browserify
  b.add("./src/main.js");
  // start bundling
  return b.bundle()
    .on('error', function(err){
      // print the error (can replace with gulp-util)
      console.log(err.message);
      // end this stream
      this.emit('end');
    })
    .pipe(source('main.js'))
    // pipe other plugin here if you want
    .pipe(gulp.dest('./dist'));
});

the error function handler prevents gulp from crashing, this.emit("end") stops the current stream, not let it run to the next pipes. The event handler can also catch error in the transform plugin.

For more information, you can read here http://truongtx.me/2014/07/15/handle-errors-while-using-gulp-watch/

JavaScript - Gulp/Browserify: SyntaxError: Unexpected token

Wait... this is not valid javascript:

module.exports = {
    console.log('Hello World');
};

Maybe you meant this?

module.exports = function () {
    console.log('Hello World');
};

Whats the difference between Gulp-Browserify and Browserify?

The difference is that browserify doesn't natively read and emit the vinyl files that the gulp pipeline deals with. gulp-browserify was an adapter for that, and I believe it did some extra things related to error handling. If possible I recommend that for the time being you avoid using gulp-browserify. In gulp 4 there may be a better way to integrate browserify with gulp. For now, see if this works for you:

var vss = require('vinyl-source-stream');

gulp.task('whatever', function () {
  var b = browserify(entry, b_opts)
    .transform(some_xform);

  return b.bundle()
    .pipe(vss('bundle.js'))
    // ... gulp stuff
    .pipe(gulp.dest(dest));
});

This will generally require you to do per-file manipulations with browserify transforms and then only do bundle-level manipulation in the gulp pipeline.

Further reading: gulpjs/gulp#369

---

Related Topics