Skip to content

Instantly share code, notes, and snippets.

@michalochman
Last active May 19, 2021 22:11
Show Gist options
  • Save michalochman/d64360541a484e16817c to your computer and use it in GitHub Desktop.
Save michalochman/d64360541a484e16817c to your computer and use it in GitHub Desktop.
gulp.js: babelify + browserify + sourcemaps
/* jshint strict: false */
/* globals require, console */
var gulp = require('gulp');
var exit = require('gulp-exit');
var browserify = require('browserify');
var watchify = require('watchify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
function compile(watch) {
var bundler = watchify(browserify('./src/index.js', {debug: true}).transform(babelify, {
// Use all of the ES2015 spec
presets: ["es2015"],
sourceMaps: true
}));
function rebundle() {
return bundler
.bundle()
.on('error', function (err) {
console.error(err);
this.emit('end');
})
.pipe(source('build.js'))
.pipe(buffer())
.pipe(rename('index.min.js'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build'));
}
if (watch) {
bundler.on('update', function () {
console.log('-> bundling...');
rebundle();
});
rebundle();
} else {
rebundle().pipe(exit());
}
}
function watch() {
return compile(true);
}
gulp.task('build', function () {
return compile();
});
gulp.task('watch', function () {
return watch();
});
gulp.task('default', ['watch']);
@RobertoPrevato
Copy link

Thank You for this precious configuration file!

@jsonmaur
Copy link

Should be noted that babelify sets sourceMaps: true by default. Cheers!

@cvvvlad
Copy link

cvvvlad commented Oct 17, 2018

Thanks!

@MaheshSasidharan
Copy link

MaheshSasidharan commented Mar 2, 2019

For gulp@4.0.0, the signature has changed.
Now we use
gulp.task(name, gulp.{series|parallel}(deps, func))

the second parameter could be as follows:

gulp.series("taskName", (done) => done()) or
gulp.parallel("comma", "separated", "task", "Names", (done) => done())

so line 64
gulp.task('default', ['watch']);
will change to
gulp.task('default', gulp.parallel('watch'), (done) => done());

Ref1
Ref2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment