Using ECMAScript 6 (ES6/ES2015) with Gulp

Did you know that you can easily write your gulpfile in ECMAScript 6 (or ES2015, or whatever you like to call it)? There are only a few steps you need to do:

Since Babel 6:

  1. Make sure you are using gulp in at least version 3.9.0:
    gulp -v to check, npm install -g gulp to update it
  2. Rename your gulpfile.js to gulpfile.babel.js
  3. Save babel-core (an ES6 to ES5 compiler) and it's ES2015 preset to your project:
    npm install --save-dev babel-core babel-preset-es2015
  4. Create a file called .babelrc beside your gulpfile with the following content:
    {
      "presets": ["es2015"]
    }

Prior to Babel 6:

  1. Make sure you are using gulp in at least version 3.9.0:
    gulp -v to check, npm install -g gulp to update it
  2. Rename your gulpfile.js to gulpfile.babel.js
  3. Save babel (an ES6 to ES5 compiler) as a development dependency to your project:
    npm install --save-dev babel

Now you can use ECMAScript 6 syntax and gulp will automatically compile it with babel when you run gulp.

You can also write your gulpfile.js directly in ES6 as long as you have an up-to-date version of Node.js. But unfortunately you cannot guarantee other people working on the same project have an updated version, too. The only requirement for any other user working on your project with this method is an up-to-date gulp (which is — in my opinion — way easier to update than Node.js).
Tim Roes
is an Android & web enthusiast from Karlsruhe with a passion for usability.