Yogesh Chauhan's Blog

How to install Gulp with WordPress?

in WordPress on July 16, 2021

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.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to verify your domain in Google Console with a TXT record?MiscellaneousWordPress Plugin: Things to knowWordPressHow to display random posts in WordPress?WordPressWhat are components in Angular?AngularUPDATE and DELETE Statements in PostgresPostgresCONCAT and CONCAT_WS Functions in PostgresPostgres