Converting Gulp project from ES5 to ES6 with Babel 6.0.0

This tutorial covers how to upgrade a Gulp project from ES5 to ES2015 (ES6) using my experience with my Theorem library and uses Babel 6.0.0. It will cover both a TL DR version and an in depth explanation of what is going on.

TL;DR

First add a package.json file if you do not already have one with the devDependencies below.

		package.json
		
{
  "name": "theorem",
  "description": "A ES6 transpiled via Babel to ES5 library that adds methods to the Math class for working with JS.",
  "version": "1.0.4",
  "homepage": "https://github.com/aasierra/theorem",
  "author": {
    "name": "Anthony A Sierra",
    "url": "http://anthonysierra.com/"
  },
  "devDependencies": {
    "gulp-sourcemaps": "1.6.0",//Necessary
    "gulp-concat":"2.6.0",//Not needed
    "babel-preset-es2015":"6.0.14",//Necessary
    "babel-plugin-transform-object-rest-spread":"6.0.14",//Optional
    "gulp-babel":"6.0.0",//Necessary
    "gulp":"3.9.0"//Should already be there
  }
}
		
	

Next is setting up the Gulp file. You will need to require sourcemaps, babel, and concat.

	gulpfile.js
	
var sourcemaps = require('gulp-sourcemaps');
var babel = require('gulp-babel');
var concat = require('gulp-concat');
	

Then go to your default task or whatever task is currently building/concatenating etc. and change your task to look like below.

		gulpfile.js
		
gulp.task('default', function () {
	//Whatever build process' go here.
  var jsdoc = require('gulp-jsdoc');
  gulp.src("./src/*.js").pipe(jsdoc("./documentation"));//Simply building docs

	//Actual needed change.
  gulp.src("./src/*.js")//Get src
  .pipe(sourcemaps.init())//Run through sourcemaps. Optional
  .pipe(babel())//Run through babel
  .pipe(concat("all.js"))//Concatenate files into one deliverable.
  .pipe(sourcemaps.write("."))//Write sourcemaps
  .pipe(gulp.dest("dist"));//Write to folder all.js so we have dist/all.js
});
		
	

Now we need to actually tell Babel that we are transpiling by creating a .babelrc file in the project root as in 6.0.0 everything became about plugins.

		.babelrc
		
{
  "presets": ["es2015"],
  "plugins":["transform-object-rest-spread"]
}
		
	

Once that is done you will need to simply run npm install and gulp or whatever your task is if not the default. This will then create a generated all.js file in the dist folder with the transpiled code along with its sourcemap.

To find actual project changes in my Theorem library to find what I did (or contribute to Theorem) visit

https://github.com/aasierra/theorem/commit/f7e054ba363f4e8892e559f5e7aa0b8118024f51.

Full explanation

So now if you followed above you should have the project using ES6 building concatenating, etc. So lets talk about what is going on.

If you notice in the package.json file we added various things such as gulp-sourcemaps etc. These are the different npm package that are needed for ES6 to work with babel and gulp. While it may seem that Babel is one big package it is still split into a lot of little packages so that way developers only grab what they need. As for Babel 6.0.0 if you go here. You will find an explanation of their changes and how they flipped to a more modular type of design.

Speaking of modular lets talk about babel-preset-es2015. In babel they have presets which go and download a lot of other npm packages that you would end up having to do yourself. This is their base ES6 packages. It is missing some things as of the writing of this article but it covers a lot of the items that are needed. Again their preset is still getting developed so it will have more in the future.

As for babel-plugin-transform-object-rest-spread You can choose to import this, this is one of the experimental packages being developed for transpilation support that once stable will be put into the babel-preset-es2015 packages.

Moving on lets talk about the actual gulpfile. If you did not understand from above, the require statements are simply grabbing the plugins and getting them ready for use. Those require statements can be put pretty much anywhere. I would suggest making them global in case you need to use them later on in different tasks, which most projects do. As for the actual task that is above the jsdoc part of it is not needed the real part of building everything is the gulp and piping. For those of you who are not familiar, gulp works with streams and you are simply putting that stream through the packages that were required above.

Anyways, this is how you setup a Gulp project using Babel 6.0.0 with ES6. If you would like to see how to write tests then follow this link. This covers how to add Mocha and Chai into the mix and actually write your tests using ES6 as well.