This guide is part of The Complete Guide to ES6 with Babel 6 series. If you’re having trouble upgrading to Babel 6, start with Six Things You Need To Know About Babel 6.

So you’ve written your app, your tests and your libraries in ES6. You’ve gotten so used to the new syntax that it feels unnatural even trying to write ES5. And this makes it all the more jarring when you add a Gulp file with an import statement, and suddenly this happens:

/unicorn-standard-boilerplate/gulpfile.js:1
(function (exports, require, module, __filename, __dirname) { import del from
                                                              ^^^^^^
SyntaxError: Unexpected reserved word

Oops, gulpfile.js only supports ES5. But lucky for you, teaching it ES6 is almost as simple as renaming a file. Almost…

Installing dependencies

Skip this section if you’ve already added Babel 6 and any required presets/plugins to your project.

Babel 6 doesn’t play well with its younger self, so start by removing any older Babel packages from package.json — babel, babel-core, etc. Next, clean up what’s left by deleting your node_modules directory and reinstalling your non-babel dependencies with npm install.

We’ll need to install the babel-core package to get access to the Babel require hook (which Gulp uses), and the babel-preset-es2015 package to get access to Babel’s collection of ES2015 transforms:

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

If you want to use any of ES6’s new built-ins in your Babel tasks — e.g. Set, Symbol or Promise` — you’ll also need to install the Babel polyfill:

npm install babel-polyfill --save-dev

Configuring Babel

Here’s a fun facts about Babel 6: it won’t actually use the ES2015 package which you’ve uninstalled until you tell it to do so. Unfortunately, there is no way to get Gulp to pass this configuration to Babel. So instead we’ll need to create a .babelrc file in the project’s root directory, which applies to the entire project:

{
  "presets": ["es2015"]
}

Telling Gulp to Babel

Once you’ve got Babel installed and configured, teaching Gulp to pass the gulpfile through Babel is surprisingly simple. Just rename your gulpfile.js to gulpfile.babel.js! You can then use the gulp command as before, but with ES6 syntax too!

The only caveat is that if you also want to use ES6 built-ins like Set, Promise and Symbol, you’ll need to require the babel-polyfill package that you installed earlier. To do so, just add an import statement to the very top of your gulpfile.babel.js:

import `babel-polyfill`;

My experience is that the new built-ins aren’t always needed in gulpfiles, so don’t add this import unless you have a reason to.

Examples

For an example of a package with a gulpfile.babel.js using Babel 6, see Unicorn Standard’s starter-kit.

OK, it works! But for how long?

Here’s a little story: while writing this article, I learned that the require hook in babel-core which Gulp uses is already set to be deprecated. Despite the fact that Babel 6 already introduced a new way of doing this only a few weeks ago. Unfortunately we can’t use the new package just yet, as Gulp hasn’t quite caught up yet.

Staying up to date in our JavaScript-driven world can be tough — and that’s why I provide my Newsletter! Subscribe to receive my latest guides on writing small apps with React. And in return for your e-mail, you’ll immediately receive three bonus print-optimised PDF cheatsheets – on React (see preview), ES6 and JavaScript promises. All for free!

One more thing – I love hearing your questions, offers and opinions. If you have something to say, leave a comment or send me an e-mail at james@jamesknelson.com. I’m looking forward to hearing from you!

Read More

• Babel Documentation: Require Hook
• Compiling ES6 NPM packages with the Babel 6 CLI
• Using ES6 and ES7 in the Browser, with Babel 6 and Webpack
• Learn Raw React

Related Projects

• See an ES6 Gulpfile in action at the Unicorn Standard Starter Kit