Start Writing ES 2015 in gulp.js With babel

With the closed spec of es 2015 - babeljs.io rised as the most appropriate solution for writing es 2015 today and transforming it to es5 so all browsers can run the code. Along with that, gulp.js released a new version which supports es 2015 and allows to write tasks and code with it.

Benefits of using es 2015 with gulp

There are few benefits from transforming the code of your project in gulp to es 2015:

  • experiment with the various features of es 2015 step by step in a non production environment
  • fat arrows syntax instead of full function declaration
  • use built in es 2015 import for requiring modules
  • and much more which is described in the babel's learning es 2015 guide

Easy Setup of es 2015

The setup takes few minutes:

  • install babel as a dependency in your project - npm i babel-core babel-preset-es2015 --save-dev
  • create a .babelrc file, and paste this code:

  • rename gulpfile.js to gulpfile.babel.js

That's it!

You can just run any gulp task, and it will work right out of the box. It's needless to say that the current code, if written in es5, would work as well. Now you can experiment the various features of es 2015. i.e, using the import keyword to require the gulp module:

In my open source project, echoes player, I converted all the gulp task files to use es 2015. so, i.e, I used fat arrow callback instead of function:


 

For the test task, I added the const variable keyword as well as used the fat arrow with the async callback argument:

There are plenty of new features as well as syntactic sugar to experiment with in es 2015. In my opinion, some syntactic sugar is writing less code - which is good enough for me.