Start Writing ES 2015 in gulp.js With babel

October 28, 2015

With the closed spec of es 2015 - 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.

{#user-content-benefits-of-using-es-2015-with-gulp.anchor}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

{#user-content-easy-setup-of-es-2015.anchor}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:
  "presets": ["es2015"]
  • 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:

```typescript // instead of this code var gulp = require('gulp'); // you can write this one import gulp from 'gulp'; ```

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:

```typescript // gulp/style.js import gulp from 'gulp'; import less from 'gulp-less'; import concat from 'gulp-concat'; import sourcemaps from 'gulp-sourcemaps';

// notice the fat arrow syntax instead of ‘function(){ … }’ gulp.task(‘style’, () => { return gulp.src([ ‘./src/css/style.less’, ‘./src/app/**/*.less’ ]) .pipe(sourcemaps.init()) .pipe(less()) .pipe(concat(‘style.css’)) .pipe(sourcemaps.write()) .pipe(gulp.dest(‘.tmp’)); });


<div class="highlight highlight-source-js">
    For the test task, I added the <strong>const</strong> variable keyword as well as used the fat arrow with the async callback argument:
// gulp/test.js
import gulp from 'gulp';
import karma from 'karma';

const isTravis = process.env.TRAVIS || false;
const pathToKarmaConf = __dirname.replace('/gulp', '');

gulp.task('test', (done) => {
    configFile: pathToKarmaConf + '/karma.conf.js',
    singleRun: isTravis
  }, done);

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.

My Consulting Packages

My consulting offerings include: Front End Development, Code reviews (React, Redux, Typescript, Javascript, Angular, NgRx), workshops, Consulting and Development. Feel free to reach out thru the below forms or through thecontact page.

© 2023, Built with Gatsby, follow me at: