“ES6” which stands for ECMAScript 2015(6th Edition) is the current version of the ECMAScript Language Specification standard. It is the most recent update to Javascript and it has brought many changes to the language which makes it simpler to use and understand. As it is the latest update, you might want to use it in your browsers because obviously you want to be updated with the latest trends.

If you are working on the server side like node.js, you can easily implement it since you can control the javascript version on the server, but it is a bit complex on client side because it depends on how well the browser that you are using can compile and execute javascript. But this does not mean that we won’t use ES6, what we can do is transpile(compile) it into ES5 code which all modern browsers can handle.

For this purpose, we will use a transpiling tool called BABEL and for the ease of use we will automate this using GULP.

Lets make a gulpfile that will watch for changes and automatically convert our ES6 code into CommonJS and then we convert this into ES5 code using browserify. So lets start with our package.json and install our dependencies:

{
  "browserify": {
     "transform": [
       "babelify"
     ]
  },
  "devDependencies": {
     "babel-preset-es2015": "*",
     "babelify": "*",
     "browserify": "*",
     "gulp": "*",
     "gulp-livereload": "*",
     "gulp-uglify": "^1.5.1",
     "vinyl-source-stream": "^1.0.0",
     "vinyl-buffer":"*"
   }
}

Once the dependencies have been installed, we will start writing our gulpfile as follows:
Step 1: Require the modules in your gulp file.

var gulp       = require('gulp');
var browserify = require('browserify');
var babelify   = require('babelify');
var uglify     = require('gulp-uglify');
var livereload = require('gulp-livereload');
var source     = require('vinyl-source-stream');
var buffer     = require('vinyl-buffer');

Step 2: Write your task to browserify

gulp.task('browserify', function(){
   return browserify({
     entries : ['./public/js/index.js'],
     debug : true
   })
   .transform('babelify', {presets: ['es2015']})
   .bundle()
   .pipe(source('bundle.js'))
   .pipe(buffer())
   .pipe(uglify())
   .pipe(gulp.dest('./public'))
})

In the above task, the file within entries we specify the main file that we want to browserify, in our case – index.js. Then we need to transpile it using babelify according to the es2015 presets. After the files being browserified, they are bundled into a single source file called bundle.js at the destination folder public.
We also need to watch our files for changes and reflect the changes that is we need to livereload our browser.

Step 3 : Write your task to watch for changes and livereload your browser.

gulp.task('browserify', function(){
   return browserify({
     entries : ['./public/js/index.js'],
     debug : true
   })
   .transform('babelify', {presets: ['es2015']})
   .bundle()
   .pipe(source('bundle.js'))
   .pipe(buffer())
   .pipe(uglify())
   .pipe(gulp.dest('./public'))
   .pipe(livereload())
})

gulp.task('watch', ['browserify'], function () { 
   livereload.listen(); 
   gulp.watch('./public/js/*.js', ['browserify']); 
});

In the above task, the livereload process listens to the changes and reloads the browser for every javascript iteration.

Step 4: Finally lets write a default task to run both these tasks.

gulp.task('browserify', function(){
   return browserify({
     entries : ['./public/js/index.js'],
     debug : true
   })
   .transform('babelify', {presets: ['es2015']})
   .bundle()
   .pipe(source('bundle.js'))
   .pipe(buffer())
   .pipe(uglify())
   .pipe(gulp.dest('./public'))
   .pipe(livereload())
})

gulp.task('watch', ['browserify'], function () { 
   livereload.listen(); 
   gulp.watch('./public/js/*.js', ['browserify']); 
});

gulp.task('build', ['browserify', 'watch']);

So this is how your entire gulpfile will look like. Now in order to run the gulpfile, at the root level of your project that is where your gulp while is located run the following command:

gulp build

Now you have a fully automated build system that transpiles your ES6 code into ES5 code and lets you run it across any browser. For knowing more about ES6 and Babel, I recommend you to read the Babel docs at: https://babeljs.io/

So enjoy learning and implementing ES6. Happy Coding !