How to install Gulp with WordPress?

Step 0: Prerequisites

A folder structure like this

your-theme/
└── assets/
    ├── images/
    ├── js/
    └── sass/

Node and npm MUST be installed on your machine.

Check the versions using following commands:

node --version
npm --version

Make sure you’re in your theme folder in terminal. If not, use this command to reach to your theme folder:

cd wp-content/themes/your-theme/

Now we’re done with the prerequisites. Let’s start with the installation.

Step 1: Create a package.json file

Use this command to create a package.json file:

You can leave the options to default settings or add your info such as author, description etc.

npm init

The command above will create a package.json file in your theme root folder.

Step 2: Install gulp

2.1: Gulp CLI

This command will install gulp command line interface.

npm install --global gulp-cli

Note that we’re installing gulp CLI globally.

2.2: Gulp

This command will install gulp:

npm install gulp --save-dev

To make sure that gulp was installed, check using this command:

gulp --version

You’ll see a CLI version and a local version.

2.3: yargs for flags and gulp-if

We will install yargs package to specify the mode either production or development mode.

npm install yargs gulp-if --save-dev

Later on, we’ll pass the mode via commands.

Using gulf-if we can run the code conditionally.

Step 3: Install babel

3.1: gulpfile.babel.js

Let’s create a gulpfile.babel.js in your theme’s root folder to compile ES6 to ES5.

3.2: babel packages

Use this command to install babel and other required packages.

npm install @babel/register @babel/preset-env @babel/core --save-dev

3.3: .babelrc

Create a .babelrc file inside your theme’s root directory and add this code:

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

Using this file, we will specify preset for babel to compile the JavaScript.

Share this post