Skip to content

Instantly share code, notes, and snippets.

@Fishrock123
Last active August 1, 2021 11:19
Show Gist options
  • Save Fishrock123/8ea81dad3197c2f84366 to your computer and use it in GitHub Desktop.
Save Fishrock123/8ea81dad3197c2f84366 to your computer and use it in GitHub Desktop.
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'))
})
@Tushant
Copy link

Tushant commented Jan 21, 2016

What further process should be done for multiple bundling?

@MaffooBristol
Copy link

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']})

@swos-
Copy link

swos- commented Sep 18, 2016

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