How to Install Gulp.js on Ubuntu 22.04 LTS

Gulp is a cross-platform free, open-source JavaScript toolkit that helps developers automate and enhance workflows. Gulp is a task running built on Node.js and NPM that helps developers reduce many time-consuming tasks such as modification and optimization, amongst many other things. Gulp also features a piping output from one task as an input into the next.

In the following tutorial, you will learn how to install Gulp.js on Ubuntu 22.04 LTS Jammy Jellyfish using the command line terminal.

Update Ubuntu

First, before anything, update your system to make sure all existing packages are up to date to avoid any conflicts.

sudo apt update && sudo apt upgrade

Install Required Dependencies

Next, to ensure the installation goes smoothly following our tutorial, run the following command, which will install any missing packages that may be required.

sudo apt install curl gnupg2 gnupg wget -y

Install Node.js

Gulp.js will need Node.js installed. Ubuntu 22.04 LTS does come with Node.js available, but for the tutorial, you will install either the current stable mainline version or the latest long-term release (LTS) version.

Import either current or lts Node.js version; I recommend the current repository.

Option 1 – Import Node.js – Current

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -

Option 2 – Import Node.js – LTS

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo bash -

Next, run a quick APT update to reflect the newly added imports.

sudo apt update

Now that you have installed the repository install Node.js as follows.

sudo apt install nodejs

Confirm the version and build of Node.js that was installed.

node --version

Lastly, ensure your NPM is up-to-date using the following command; this is critical; do not skip.

sudo npm install npm@latest -g

Install Gulp.js

Install Gulp CLI

The first step is to install the Gulp CLI tool globally on your system, which is used to work with and manage your Gulp.js application.

Use the following command to install the Gulp CLI tool.

sudo npm install -g gulp-cli

Once installed, move on to installing Gulp.js.

Install Gulp.js

To install Gulp.js, you need first to create a directory used as your application directory.

Use the following command as an example:

sudo mkdir ~/gulp-directory && cd ~/gulp-directory

Now that you created the directory and have navigated to it, create a new application with the following npm command:

sudo npm init

Next, you will see a series of questions to provide information on your new application, as shown below.

Example:

Type “yes” when you are happy with the details entered to proceed.

Once complete, install the Gulp module to your application with the following terminal command:

sudo npm install --save-dev gulp

Create Test Application (Hello World Example)

Now that you have successfully installed Gulp.js in your application directory, you will create a quick example to get familiar with how to use Gulp.js by creating the famous Hello World quick application example.

First, navigate to your directory and create the gulpfile.js file.

cd gulp-directory && sudo nano gulpfile.js

Now copy and paste the following code.

var gulp = require('gulp');

gulp.task('hello', function(done) {
  console.log('Hello World!!! From Linuxcapable.com');
  done();
});

Save the file (CTRL+O), then exit (CTRL+X).

Next, run the Gulp task by executing the following command:

gulp hello

Example output:

Comments and Conclusion

Gulp.js is a popular tool amongst developers to automate tasks and processes with ease, making it an essential part of any developer’s toolkit. In this post, we’ve shown you how to get started with Gulp.js.

For further information, visit the official documentation page for further learning.