Skip to content

Instantly share code, notes, and snippets.

@danharper
Last active May 1, 2023 01:23
Show Gist options
  • Save danharper/3ca2273125f500429945 to your computer and use it in GitHub Desktop.
Save danharper/3ca2273125f500429945 to your computer and use it in GitHub Desktop.
New ES6 project with Babel, Browserify & Gulp
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var watchify = require('watchify');
var babel = require('babelify');
function compile(watch) {
var bundler = watchify(browserify('./src/index.js', { debug: true }).transform(babel));
function rebundle() {
bundler.bundle()
.on('error', function(err) { console.error(err); this.emit('end'); })
.pipe(source('build.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build'));
}
if (watch) {
bundler.on('update', function() {
console.log('-> bundling...');
rebundle();
});
}
rebundle();
}
function watch() {
return compile(true);
};
gulp.task('build', function() { return compile(); });
gulp.task('watch', function() { return watch(); });
gulp.task('default', ['watch']);
@ahmed-hamdy90
Copy link

adding a new notice about @cfrank comment
There another solution to add ES2015 preset options tobabelify, which Must add to Babel to enable transform ES6 code into ES5 code Since Babel 6.x.x.

).transform(babel, {
    // Use all of the ES2015 spec
    presets: ["es2015"]
})

As browserify.transform can pass options parameter for transformer as second parameter

@jakubbarczyk
Copy link

Following @ofiesh's suggestion, I've updated the compile function's internals accordingly:

function rebundle() {
    return bundler
        .bundle()
        .on('error', function (err) {
            console.error(err);
            this.emit('end');
        })
        .pipe(source('build.js'))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('./build'));
}

if (watch) {
    bundler.on('update', function () {
        console.log('-> bundling...');
        rebundle();
    });

    rebundle()
} else {
    rebundle().pipe(exit());
}

@ivomarsan
Copy link

Thanks man!

@maxime-helen-sb
Copy link

maxime-helen-sb commented Apr 27, 2016

Thank you for this usefull code. I had to use instead .transform(babelify, { presets: ['es2015'] }) conf for making it working with "babel-preset-es2015": "^6.6.0", "babelify": "^7.3.0", node modules

@edin-m
Copy link

edin-m commented Jun 24, 2016

For gulp-livereload pipe() it after gupl.dest() [1]. Install chrome livereload extension as well.

var livereload = require('gulp-livereload');
...
    ...
    .pipe(gulp.dest('./build'))
    .pipe(livereload({ start: true }));

@dirkroorda
Copy link

Same question as @aaronbeall and @martinsik: how to get the sourcemaps pointing to the ES6 source.
I can't imagine that all users above are content to look at transpiled ES5 code as their sources.
So, how to init the sourcemaps before babel does the 6=>5 transform?

@dirkroorda
Copy link

Ah, I see. You do get ES6 sourcemaps, only Safari was not showing them te me. Safari expects source maps inline, or in the same directory as the build result. In my config I had the maps generated in '../maps'. Generating them in './' does the trick, also for Safari.

@fakiolinho
Copy link

Awesome work, thank you!!

@YuraRudkovskiy
Copy link

Do you have a problems when triggered

.transform(babel.configure({
        // Use all of the ES2015 spec
        presets: ["es2015"]
    }))

several times in a row?

@FranciscoG
Copy link

FranciscoG commented Feb 15, 2017

question,
Why does anyone need watchify at all if you're already using gulp that comes with its own file watching built in?

I need to test this out but I believe you could rewrite the whole gulpfile to this:

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var babel = require('babelify');

gulp.task('build', function(){
  var bundler = browserify('./src/index.js', { debug: true }).transform(babel);

  bundler.bundle()
      .on('error', function(err) { console.error(err); this.emit('end'); })
      .pipe(source('build.js'))
      .pipe(buffer())
      .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./build'));
});

gulp.task('watch', function () {
  gulp.watch('./src/**/*.js', ['build']);
});

gulp.task('default', ['watch']);

@yeomann
Copy link

yeomann commented Feb 19, 2017

@FranciscoG yes you are right! maybe it was needed since OP created this config based JS function instead gulp task. I have similar working configuration like yours at https://github.com/yeomann/GulPress/blob/master/gulpfile.js

@nicekiwi
Copy link

nicekiwi commented Mar 7, 2017

Here's my take on it, hacked, slashed and smashed to bundle and watch multiple files working right. :)

https://gist.github.com/nicekiwi/ca575492dfd83504aced26892c559d58

More info on that in the gulp recipes here too:
https://github.com/gulpjs/gulp/blob/master/docs/recipes/browserify-multiple-destination.md

@luv2code
Copy link

Here is mine, it does uglify & sourcemaps. It uses watchify for increment builds plus livereload to notify the browser.
https://gist.github.com/luv2code/77ddbc79c02d40194f929841d0696ebc

@MaheshSasidharan
Copy link

Thanks a lot. This works great.

However I added a return statement on line 13 and 29 to show that the build task is completed
Finished 'build' after 749 ms;

However, still, the batch process is not ending. I still have to press CTRL+C to exit this process. :\

@kennblvnp
Copy link

can we see the package.json of these?

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