gulp & browserify (+watchify +babelify)
var gulp = require('gulp') | |
var browserify = require('browserify') | |
var watchify = require('watchify') | |
var babelify = require('babelify') | |
var source = require('vinyl-source-stream') | |
var buffer = require('vinyl-buffer') | |
var merge = require('utils-merge') | |
var rename = require('gulp-rename') | |
var uglify = require('gulp-uglify') | |
var sourcemaps = require('gulp-sourcemaps') | |
/* nicer browserify errors */ | |
var gutil = require('gulp-util') | |
var chalk = require('chalk') | |
function map_error(err) { | |
if (err.fileName) { | |
// regular error | |
gutil.log(chalk.red(err.name) | |
+ ': ' | |
+ chalk.yellow(err.fileName.replace(__dirname + '/src/js/', '')) | |
+ ': ' | |
+ 'Line ' | |
+ chalk.magenta(err.lineNumber) | |
+ ' & ' | |
+ 'Column ' | |
+ chalk.magenta(err.columnNumber || err.column) | |
+ ': ' | |
+ chalk.blue(err.description)) | |
} else { | |
// browserify error.. | |
gutil.log(chalk.red(err.name) | |
+ ': ' | |
+ chalk.yellow(err.message)) | |
} | |
this.end() | |
} | |
/* */ | |
gulp.task('watchify', function () { | |
var args = merge(watchify.args, { debug: true }) | |
var bundler = watchify(browserify('./src/js/app.js', args)).transform(babelify, { /* opts */ }) | |
bundle_js(bundler) | |
bundler.on('update', function () { | |
bundle_js(bundler) | |
}) | |
}) | |
function bundle_js(bundler) { | |
return bundler.bundle() | |
.on('error', map_error) | |
.pipe(source('app.js')) | |
.pipe(buffer()) | |
.pipe(gulp.dest('app/dist')) | |
.pipe(rename('app.min.js')) | |
.pipe(sourcemaps.init({ loadMaps: true })) | |
// capture sourcemaps from transforms | |
.pipe(uglify()) | |
.pipe(sourcemaps.write('.')) | |
.pipe(gulp.dest('app/dist')) | |
} | |
// Without watchify | |
gulp.task('browserify', function () { | |
var bundler = browserify('./src/js/app.js', { debug: true }).transform(babelify, {/* options */ }) | |
return bundle_js(bundler) | |
}) | |
// Without sourcemaps | |
gulp.task('browserify-production', function () { | |
var bundler = browserify('./src/js/app.js').transform(babelify, {/* options */ }) | |
return bundler.bundle() | |
.on('error', map_error) | |
.pipe(source('app.js')) | |
.pipe(buffer()) | |
.pipe(rename('app.min.js')) | |
.pipe(uglify()) | |
.pipe(gulp.dest('app/dist')) | |
}) |
This comment has been minimized.
This comment has been minimized.
@jpilcher I think you need to do this for plumber, but I haven't tried it.
|
This comment has been minimized.
This comment has been minimized.
Hello, thanks for this example. Got a Any idea ? |
This comment has been minimized.
This comment has been minimized.
@Juljan try to change it to |
This comment has been minimized.
This comment has been minimized.
What further process should be done for multiple bundling? |
This comment has been minimized.
This comment has been minimized.
Thanks! With a few modifications, this worked perfectly for me. Got React and ES6 bindings to work too by using: watchify(browserify('./lib/main.jsx', args)).transform(babelify, {presets: ['es2015', 'react']}) |
This comment has been minimized.
This comment has been minimized.
Thanks for this. Spent a fair bit of time trying to fix Gulp crashing every time Browserify/Babelify ran into an error. This is the only solution which worked (with a modification of this.end() to this.emit('end')). |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Very nice. I'm trying to use gulp-plumber
.pipe(plumber(map_error))
to handle my errors instead of.on('error', map_error)
but it never seems to fire themap_error
function. Any ideas?