Front-End Insights

ES6 syntax in the Gulp file by using Babel


In one of my previous posts I showed you how to start with Gulp and configure the first task. But the examples I presented in that article were written in old ES5 JavaScript. As I want to keep up with the latest trends and to use ES6 in my projects, I wanted to do the same with the Gulp file. Fortunately there is such a possibility so today, thanks to Babel, I will show you how to use ES6 syntax in the Gulp file!


First of all, you have to have at least version 3.9.0 of Gulp. You can check which version you have using this command:

gulp -v

If it shows that you have an older version or if you just want to have the newest one, you should run the following:

npm install --save-dev gulp && nmp install -g gulp

This will install the freshest version of Gulp locally as a development dependency (you should always install it in this way) and also globally. Please note that in Unix based operation systems you may need to use the above command with sudo.

The next thing you will need is the newest version of Babel. We can install it using npm too. More precisely, we have to install two things:

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

If you are already using Babel in your project make sure that you have at least version 6.0.0. The first package will install all the necessary Babel modules (actually there will be loads of them…). The second one is a presets package which contains a configuration to allow Babel to compile ES6/ES2015 syntax.

There is one more thing to make it work. We have to inform Babel that it should use the ES6 preset. To do so, we should create a new file in the root of the project and name it .babelrc. The file should have the content as shown below:

  "presets": ["es2015"]

Use ES6 syntax

Ok, so when the configuration is behind us, we can start writing Gulp tasks using ES6 syntax. As you probably know, all tasks should be placed in the file called gulpfile.js. To tell Gulp that we want to use Babel in this file we should use the gulpfile.babel.js name instead. If you start a new project, just create it or if you have an old one already, just rename it and use ES6 syntax inside it.

Please see below a sample content of gulpfile.babel.js which transforms less files into css:

import gulp from 'gulp';
import less from 'gulp-less';
import path from 'path';

const lessIncludes = [path.join(__dirname, 'layout', 'includes')];

gulp.task('less', () => {
  return gulp.src('./layout/**/*.less')
      paths: lessIncludes

gulp.task('default', ['less']);


As you can see, it’s pretty easy to use Gulp with the Babel transpiller. As ES6 is becoming a standard these days, it’s good to know that we can use it with one of the most important front-end development tools. This way you can keep your code consistent everywhere and use all of ES6 benefits.