Teaching Gulp ES6, with Babel 6

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.jsonbabel, 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
But other tutorials say to install babel-polyfill with --save, not --save-dev?

Yep, and they’re correct. The difference is that for Gulp, babel-polyfill only needs to run while Gulp is running — not while your app is. If you’re using babel-polyfill in your application too, keep it is a a dependency, not a devDependency.

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"]
}
Hint: Global configuration

Unfortunately, .babelrc is shared between all tools which can’t set their own configuration. For example, the Mocha test runner also reads .babelrc when used with the Babel register script. Plan accordingly, and try not to put anything in there which is going to surprise you later on.

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!

I will send you useful articles, cheatsheets and code.

I won't send you useless inbox filler. No spam, ever.
Unsubscribe at any time.

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

Related Projects

4 Comments Teaching Gulp ES6, with Babel 6

  1. Brian

    Can you link to where the requrie hook deprecation decision was discussed, and/or documentation or clues for what the new method is? Thanks!

    Reply
    1. James K Nelson

      The new method is to install the package `babel-register`, and use that instead of `babel-core/register`. I’m not sure where the discussion occurred, sorry – I found this by browsing through source code (it has a commented out deprecation warning, so the old method isn’t deprecated quite yet).

      Reply
  2. Joe Zim

    I tend to use npm scripts to run Gulp and I do it by running “babel-node ./node_modules/gulp/bin/gulp”. This seems like a pretty decent way to call Gulp, but it kinda requires you to know where the main file for Gulp is found.

    Of course it “should” be done the built-in way, but if the built-in way is in constant flux, I’ll take this instead. 🙂

    Reply

Leave a Reply

Your email address will not be published.