New ES6 project with Babel, Browserify & Gulp

gulpfile.js

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

Hi guys, I tried to apply this code, but I got a error --Unexpected token error when I try to use it for ReactJS code. Can anyone help me out? Here is the details of question in stackoverflow -- Link. Thanks!

If anyone has problems with code not trans compiling it might be because babel 6.x.x no longer ships with transformations enabled by default. You will need to install a transformation:

npm install --save-dev babel-preset-es2015

And add it to your gulpfile. For example:

let bundler = watchify(
    browserify({
        // Define the entry point for our application
        entries: [js_build + 'main.js'],
        // Debugging is nice
        debug: true,
        // Allow importing from the following extensions
        extensions: [' ', 'js', 'jsx']
    }).transform(babel.configure({
        // Use all of the ES2015 spec
        presets: ["es2015"]
    }))
);

The new part is

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

More presets are here http://babeljs.io/docs/plugins/#presets

Thank you for sharing, perfect to start my project :)

What should I do when I want to bundle and watch for multiple files? In this case just index.js is bundled and watched but I want it to be work with multiple files.

@aaronbeall I'm scratching my head with the same issue. Did you solve it somehow?

@Tushant you can add a watch function inside and call the watch or other tasks... maybe scss or jshint etc
gulp.task('watch', function() { gulp.watch(['index.html'], ['watch']); return watch(); });

https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

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

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());
}

Thanks man!

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

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 }));

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?

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.

Awesome work, thank you!!

Do you have a problems when triggered

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

several times in a row?

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

@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

@FranciscoG @yeomann http://stackoverflow.com/questions/35539851/difference-between-watchify-and-gulp-watch

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

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

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. :\

can we see the package.json of these?