Installing gulp4 with babel to support an ES6 gulpfile
This guide covers installing gulp4 with babel to support ES6 syntax in your gulpfile.
Gulp is a task automation tool that has emerged as one of the standard build tools to automate the web development workflow. Babel is a compiler/transpiler that enables developers to use next-generation ECMAScript syntax (ES6 and beyond) instead of older JavaScript (ES5) syntax.
Gulp4 and ES6+ work together swimmingly to help you write cleaner, easier-to-read, and more maintainable gulpfile’s.
Installing gulp4
At the time of writing, the default gulp
package installs gulp 3.x. The following will install and configure gulp4.
Gulp has two key parts: gulp
and the gulp-cli
command line tools. The idea is that gulp-cli
should be installed globally on a developer’s machine while gulp
should be installed locally on a per-project basis. This helps ensure compatibility with different versions of gulp that will inevitably arise when maintaining projects of different vintages.
To use gulp4, cli version 2.0 or greater is required. Check the version on your system with:
gulp -v
If the command returns a command not found error, then you probably don’t have gulp installed at all (or at least don’t have it available in your PATH).
If the command outputs a version lower than 2.0, you may need to uninstall any globally-installed gulp (and/or gulp-cli) and then install the current version gulp-cli before proceeding.
To install gulp-cli globally, run ONE of the following commands, depending on your preference of package manager. npm
is the classic node package management tool and yarn
is a newer tool developed by Facebook that addresses certain shortcomings with npm
.
yarn global add gulp-cli
# OR
npm install gulp-cli -g
Test the install by running gulp -v
and ensuring the version output is greater than 2.0. Next, install the gulp@next
package. The @next part specifies the next-generation gulp4.
Assuming you have already run npm init
or yarn init
and have a package.json
file, execute the following command in your project’s root directory:
yarn add gulp@next --dev
npm install gulp@next --save-dev
Installing babel
yarn add @babel/core --dev
yarn add @babel/preset-env --dev
yarn add @babel/register --dev
# OR
npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/register --save-dev
Next, create a .babelrc
file in your project’s root folder and specify the current version of node as the target:
{
"presets": [
["@babel/preset-env", {
"targets": {
"node": "current"
}
}]
]
}
Create your gulpfile
Create your gulpfile with the filename gulpfile.babel.js
. The babel.js
suffix ensures that babel will be used to process the file.
The following example demonstrates a few ES6+ features: optional semicolons, import
statements, and the “fat arrow” syntax for defining functions:
'use strict'
import gulp from 'gulp'
gulp.task('task-name', () => {
// example
return gulp.src('/path/to/src')
.pipe(gulp.dest('/path/to/dest'))
})
Gulp4 features a new task execution system that introduces the functions gulp.series()
and gulp.parallel()
that can execute gulp tasks in either series (one-after-another) or parallel (at the same time). This makes a lot of workflows much easier to define vs. previous versions!
Another nice feature is that gulp4 supports returning a child process to signal task completion. This makes it cleaner to execute commands within a gulp task, which can help with build and deployment related tasks.
The following example defines a default build
task that runs two functions/tasks in series using gulp.series()
. The build task is defined using the ES6 const
keyword and exported as the default function/task for the gulpfile. The example doSomething()
and doAnotherThing()
functions/tasks are also exported.
'use strict'
import gulp from 'gulp'
export function doSomething {
// example
return gulp.src('/path/to/src')
.pipe(gulp.dest('/path/to/dest'))
})
export function doAnotherThing {
// example
return gulp.src('/path/to/src')
.pipe(gulp.dest('/path/to/dest'))
})
const build = gulp.series(doSomething, doAnotherThing)
export default build