Skip to content

Gulp 4: How To Install Gulp JS And Start Using It

Introduction

In this article, I’m going to show you how to install Gulp 4 and create your first Gulp task to start using it. I assume you have installed Node JS and NPM on your machine because we will need them to install and run Gulp JS.

Check Node JS and NPM Installation

Suppose you want to check Node JS and NPM installation. You can run node --version and npm --version from your Terminal. And the Terminal will tell you the installed version of node and npm if installed.

Clone the GitHub Project

So, we have a project which I have created for the demonstration. And it is available on GitHub. You can make a local copy of this project using git clone or simply downloading it as a zip file. It has a bunch of files in it. We are primarily going to concern with the folder called “source”. It has an HTML page and some JavaScript and CSS files.

Initialise NPM Project

We want to go ahead and make some automation for this project. So first, pull up the Terminal and move over to where your project root directory is. Suppose you haven’t set up your NPM project, which is not the case if you have made a copy of the Github repository mentioned earlier. Run npm init --yes, and this utility will create the default package.json file for your project. And this package.json file will allow you to save all of your project’s modules and properties.

Install Gulp 4

Now, we are going to install Gulp 4. If you have installed an earlier version of Gulp JS, you will need to remove it by running npm uninstall --global gulp.

Gulp 4 comes in two parts. A command-line interface called Gulp CLI which we want to install globally by running npm install --global gulp-cli. There is also a local version of Gulp JS that we will install in our project. Run npm install --save-dev gulp@4 to install it into your project development dependencies.

Create gulpfile.js

Now, what we are going to do is create a file called gulpfile.js in the same directory as your project. And Gulp will load this file automatically when you run the gulp command in the Terminal. Then we will import the gulp module at the top of gulpfile.js.

Create a Gulp JS Task

Gulp JS will allow you to use regular JavaScript to manage your tasks. To create your first task, all you need to do is create a normal JavaScript function and export it. Here we will create a JavaScript function called log to print a string into the Terminal. To make this available as a Gulp task, export the function that you have created.

const { src, dest } = require('gulp');

const log = (done) => {
  console.log('Hello Gulp!');
  done();
};

exports.log = log;

Run the Gulp Task

To run the task, pull up the Terminal and run gulp log. You can also export this function as the default export. In this case, you can run the gulp command without any arguments, and Gulp will execute this function as the default task.

const { src, dest } = require('gulp');

const log = (done) => {
  console.log('Hello Gulp!');
  done();
};

exports.default = log;

GitHub Repo

Here is the GitHub repository where you can find the complete source code of this article, clone the project and run it on your machine.

Tags: