Scott Addie

Last Updated: 8/26/2015

One of the lesser known features of Gulp is the Babel support introduced in version 3.9 of the CLI. By the way, Babel is the de facto standard ES6+-to-ES5 transpiler. This feature is vaguely stated in the release’s change log on GitHub. But what does it actually mean? In short, rename your gulpfile.js file to gulpfile.babel.js, install the Babel NPM module at the project level (npm install --save-dev babel), and begin leveraging ES6+ language features in your Gulp tasks.

To demonstrate what was described above, see my GitHub repository here for a very simple example; and, if you’re expecting feature parity while following along in this blog post, Visual Studio Code 0.7.10 was used on Windows. If you’re using Mac OS X or Linux, version 0.7.0 provides the equivalent feature set. More information on the version differences is available here. Finally, the Node.js and Gulp versions being used are 0.12.7 and 3.9.0, respectively.

Now that we’ve addressed a few housekeeping items, how would one debug an ES6-enhanced Gulp file in Visual Studio Code? Truth be told, there is a little bit of configuration required before it will work. More specifically, there are 3 files with which we must become familiar.

1. jsconfig.json

If you’re following along with my GitHub repository, this file already exists. I’m calling it out solely for the important role it plays in the editor. Introduced in version 0.5.0 of Visual Studio Code, a few of its responsibilities are to indicate the level of ECMAScript support and to define the JavaScript module system. In this project, it enables ES6 support and defines CommonJS as the module system being used. The absence of the ES6 setting, in particular, will yield errors related to unrecognized reserved keywords from the ES6 language specification.

2. tasks.json

Create this file, as it doesn’t exist in the GitHub repository. It should reside within a .settings folder at the root of the project. It’s in this file that some knowledge of the Babel CLI options is required; and, the args parameter appearing in the gist below is where they’ll be used. The four args parameter values are:

1. ./gulpfile.babel.js <– The targeted file name
2. –out-file <– Write output to a file to be named
3. ./gulpfile.js <– The name of the file to be created after the transpilation process
4. -w <– Enable watch mode, so that gulpfile.js is regenerated whenever gulpfile.babel.js changes

3. launch.json

Create this file within the aforementioned .settings folder as well. This file will be used to instruct the Node.js debugger how to behave. The entry point of the debugging session is defined in the program property. As an optional step, it’s a good idea to use a descriptive string in the name property. It’s what will appear in a drop-down list to the right of the green Play button on the Debug panel of the editor.

One final tidbit about the gist below revolves around the purpose of the args property. It’s here that we’ll pass the name of the specific Gulp task to be executed. In this case, the task name is “build”.

Putting the pieces together

With these 3 JSON files in place, it’s time to put debugging to the test. Navigate to the Debug panel, either by clicking the icon on the left or by using the keyboard shortcut (Ctrl + Shift + D). Here’s what you should see:

Next, press Ctrl + Shift + B. This will run Babel’s transpiler, since the command defined in tasks.json is “${workspaceRoot}/node_modules/.bin/babel”. The following gulpfile.js file will have been generated and dropped at the project’s root:

Open gulpfile.js in the editor, and set a breakpoint on the “build” task while looking at the file in Debug view. Note that a breakpoint can be set by simply clicking to the left of a line of code. Here’s what you should see:

Finally, click the green-colored Start button. Notice that the program execution will pause on the breakpoint which was set.

Because watch mode was requested in the tasks.json file, rest assured that whenever you modify gulpfile.babel.js, Babel will immediately regenerate gulpfile.js. Pretty cool!

As always, I’m curious how other Visual Studio Code users have dealt with this particular problem. Please leave some feedback in the comments section below. I’d also welcome any suggestions for improvements to the approach I described above.