Catalin Vasile

I'm a design-focused engineer.

Using Gulp 4 with ES6 (Babel)

Creating your gulpfile.js with ES6 (using Babel) for Gulp 4 is quite straightforward. Let’s assume you have an empty directory with only Gulp 4 installed:

yarn init && yarn add gulp --save-dev

1. Install Babel

In order to install Babel, its dependencies and the env-preset, make sure to run the following command:

yarn add @babel/cli @babel/core @babel/polyfill @babel/preset-env @babel/register --save-dev

2. Setup Babel

There are multiple ways that you can follow in order to specify which Babel preset you’d like to use. We’re going to use preset-env, and in this example we’ll do this inside our package.json file.

"babel": {
    "presets": [
        "@babel/preset-env"
    ]
}

3. Create your gulpfile

Create a new file called gulpfile.babel.js and write your Gulp 4 compliant tasks. Below is a test for your reference:

"use strict";

import gulp from "gulp";

gulp.task("test", (done) => {
    console.log("It works!");
    done();
});

Now test it by running gulp test inside your terminal. You should see something like this:

Screenshot 2019 01 21 at 17 17 01 700x167

If you get any command not found: gulp error, make sure to use the full path to Gulp:

node_modules/.bin/gulp test

That’s it! You are now ready to create kick-ass build processes using ES6 and Gulp 4. 🤘

Subscribe

Be the first to know when I publish a new article on the blog.

No spam. You can unsubscribe at any time.


Comments