How To Set up Gulp on Ubuntu 20.04

In this article, we want to teach you How To Set up Gulp 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 the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files.

How To Set up Gulp on Ubuntu 20.04

Before you start to set p Gulp, you need to log in to your server as a non-root user with sudo privileges. To do this, you can follow our article the Initial Server Setup with Ubuntu 20.04.

Now follow the steps below to complete this guide.

Install Node.js on Ubuntu 20.04

To install Gulp on Ubuntu 20.04, you need to have Node and NPM installed on your server. First, update your local package index with the following command:

sudo apt update

Then, install the required packages on your server with the following command:

sudo apt install python3-software-properties gnupg2 curl wget

Now you need to add the Node.js repository to your server:

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

At this point, you can install Node.js with the following command:

sudo apt install nodejs

You can verify your Node.js installation by checking its version:

node --version

Output
v14.19.1

Also, you can check your NPM version:

npm --version

Output
6.14.16

Set up Gulp on Ubuntu 20.04

First, you need to create a sample Node.js project. Create a new directory & change the directory with the following command:

mkdir gulp-project && cd gulp-project

Then, you need to create a new application with NPM.

npm init

Provide some information or Press Enter to create a package.json file.

Output
package name: (gulp-project)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /root/gulp-project/package.json:
{
"name": "gulp-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes) yes

At this point, you can install Gulp on Ubuntu 20.04:

npm install -g gulp-cli

When your installation is completed, you will get the following output:

Output
...
/usr/bin/gulp -> /usr/lib/node_modules/gulp-cli/bin/gulp.js
> [email protected] postinstall /usr/lib/node_modules/gulp-cli/node_modules/es5-ext
> node -e "try{require('./_postinstall')}catch(e){}"
+ [email protected]
added 253 packages from 165 contributors in 16.198s

Next, install the gulp package on Ubuntu 20.04 with the following command:

npm install --save-dev gulp

Output
...
+ [email protected]
added 327 packages from 226 contributors and audited 328 packages in 15.834s

8 packages are looking for funding
run `npm fund` for details

found 1 high severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details

Verify your Gulp installation on Ubuntu 20.04, by checking its version:

gulp --version

Output
CLI version: 2.3.0
Local version: 4.0.2

How To Use Gulp on Ubuntu 20.04

At this point, we want to show you a basic usage of Gulp by creating a sample application.

First, create a gulpfile.js with your favorite text editor, here we use vi:

vi gulpfile.js

Add the following contents to the file:

var gulp = require('gulp');
gulp.task('hello', function(done) {
console.log('Hello World!!!');
done();
});

When you are done, save and close the file.

Then, run the Gulp task on Ubuntu 20.04 with the following command:

gulp hello

You will get the following output:

Output
[14:11:53] Using gulpfile ~/gulp-project/gulpfile.js
[14:11:53] Starting 'hello'...
Hello World!!!
[14:11:53] Finished 'hello' after 2.92 ms

Conclusion

Tools like Gulp are often referred to as “build tools” because they are tools for running the tasks for building a website.

At this point, you learn to Set up Gulp on Ubuntu 20.04.

Hope you enjoy it.