Yogesh Chauhan's Blog

How to install Gulp with WordPress?

in WordPress on July 16, 2021

Step 0: Prerequisites

A folder structure like this

└── 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:

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

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

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to add onclick event to html elements dynamically using JavaScript?JavaScriptColleague UI Basics: The Search AreaColleagueHow to create ‘share on LinkedIn’ link using just HTML?HTMLHow to read Standard Input in Swift?SwiftHow to Create a Copy of a Table in SQL and MySQL?SQL/MySQLSELF JOIN in PostgresPostgres