How to install Gulp.js on Ubuntu 20.04

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. At a high level, gulp reads files as streams and pipes them through different tasks. These tasks are written in code and use plugins to modify the files, turning source files into production files. To get an idea of what gulp can do, check out the list of gulp recipes on GitHub.

Prerequisites

Before we install Gulp.js, you'll need a few things:

• A server running Ubuntu 20.04 or newer, and an account with sudo privileges. I'm using a dedicated server from Spin Servers.
• About 10 minutes and a cup of coffee or hot tea. I prefer vanilla chai with a dash of whole or almond milk, depending on my mood that day.

Step 1: Update your system

First things first: always update your system before installing software or making changes:

sudo apt update
sudo apt upgrade

Step 2: Install Node.js

Gulp runs on Node.js, so install that first. Add the NodeSource repository for the current long-term support (LTS) release, then install Node.js (npm is included). Our guide on how to install Node.js on Ubuntu 20.04 covers the options in more detail.

curl -fsSL https://deb.nodesource.com/setup_lts.x -o nodesource_setup.sh
sudo -E bash nodesource_setup.sh
sudo apt install -y nodejs

Verify the version:

node --version

Step 3: Create a sample project with npm

Create a new project directory, replacing my-app with a name of your choice, and move into it:

mkdir ~/my-app
cd ~/my-app

Then create the project:

npm init

npm will ask you a few questions about the project. You can press Enter to accept the defaults, or run npm init -y to skip the questions entirely.

Step 4: Install Gulp.js

First, install the gulp command-line tool globally:

sudo npm install -g gulp-cli

Then, from inside your project directory, install gulp as a development dependency:

npm install --save-dev gulp

Verify the installation:

gulp --version

This shows both the CLI version and the local gulp version installed in your project.

Step 5: Create a gulp task

Now let's create a sample gulp task. Create a file called gulpfile.js in your project directory:

nano ~/my-app/gulpfile.js

Add the following content:

function hello(cb) {
  console.log('Hello World!!!');
  cb();
}

exports.hello = hello;

Save and exit the file (in nano, press Ctrl + O, Enter, then Ctrl + X).

Now run the task:

gulp hello

You should see Hello World!!! in the output, followed by a message that the task finished. Your Gulp.js project is now up and running! :)

The server behind this guide

To make these how-to guides possible, I use a dedicated server from Spin Servers. My configuration is:

• Dual Intel Xeon E5-2630L (12 cores at 2.00 GHz)
• 128 GB DDR3 RAM
• 4 × 2 TB HDD in hardware RAID-10
• 10 TB bandwidth on a 10Gbps port
• Dallas, TX location

I get this configuration for $89/month with the code DUALE5FOR89. You can find this promotion and others in the Spin Servers thread on Web Hosting Talk.

If you have questions about any of our services, please contact us via email at [email protected] or by using our live chat at spinservers.com.

Spin Servers is a US-based provider of dedicated servers & affordable private cloud solutions. Our motto is to let you "spin up servers" fast, seamlessly, and affordably.