dots Created with Sketch.
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.

amazon

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

#Jul 22 Is there a CSS parent selector? #Jul 22 Difference between :where and :is in CSS #Jul 22 Does :is() pseudo selector hint at CSS preprocessing in the future? #Jul 22 Control Scrolling with CSS Scroll Snap #Jul 21 Control rendering using CSS content-visibility property #Jul 21 How to use @supports rule in CSS?
You might also like these
2 Ways We Can Write Multiple Line Commands in PHPPHPHow to convert a function component into a class in React?ReactOverview of Drupal and how it worksDrupal4 different ways to create JavaScript ObjectsJavaScriptHow to select an element using its ID without the high specificity of the ID selector?CSSFor In Loop in Swift for BeginnersSwift