Install GulpJS on Ubuntu 20.04

Hello, friends. In this post, you will learn how to install GulpJS on Ubuntu 20.04 quickly and easily.

In short, Gulp is a tool to automate tasks, mostly on the front-end layer. It is developed in javascript and works on NodeJS so it can run on any system.

By using gulp streams, you can apply many transformations to your files while in memory before anything is written to the disk—significantly speeding up your build process.

This is why many developers include it in their projects as it automates certain repetitive tasks.

Installing GulpJS on Ubuntu 20.04

Install NodeJS on Ubuntu 20.04

This tool is built with NodeJS, so we have to install it on our system.

So, in a terminal, make sure you have Ubuntu up to date.

sudo apt update
sudo apt upgrade

Also, install the software-properties-common package which is usually already included, but it’s better to be sure.

sudo apt install software-properties-common

In this post, we will be working with 14.x version of NodeJS, so we have to install it via the external repository provided by the developers. To add the repository, we have to run the following command:

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

Now we can install NodeJS by running the following command.

sudo apt install nodejs

Check the nodejs and npm versions to see if the process was successful.

node --version
v14.16.1

npm --version 
6.14.12

Install GulpJS on Ubuntu

Now we need to create a folder where the Gulp installation will be. Then we need to access it.

mkdir project
cd project

Note: you can use a name other than project.

Then, start the NodeJS project.

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (project) 
version: (1.0.0) 
description: Sample for Osradar
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 

The output will be a series of questions about the information related to the project we just started.

And the package.json file will be created with the information you supplied.

Now proceed to install gulp-cli which is one of the packages needed to use Gulp.

sudo npm install -g gulp-cli
+ [email protected]
added 252 packages from 165 contributors in 20.212s

And install as such, the Gulp package

sudo npm install --save-dev gulp
+ [email protected]
added 326 packages from 226 contributors and audited 327 packages in 17.689s

After this, you can verify the installation by running:

gulp --version
CLI version: 2.3.0
Local version: 4.0.2

Testing the installation

Now let’s proceed with an example to see if everything went well, create a file called gulpfile.js with your favorite text editor. I will use nano.

nano gulpfile.js

And add the following:

var gulp = require('gulp');

gulp.task('sample', function(done) {
  console.log('Hello World from Osradar');
  done();
});

In this case, I’ve defined a task that just prints a greeting on the screen.

To run it, just type

gulp sample

Output:

[18:38:09] Using gulpfile ~/project/gulpfile.js
[18:38:09] Starting 'sample'...
Hello World from Osradar
[18:38:09] Finished 'sample' after 1.64 ms

So, Gulp is installed and ready to be useful.

Conclusion

Gulp contributes to the automation of many tasks that a front-end developer may find tedious. This makes it a valuable tool for many of them. In this post, we have taken you through a series of steps to help you install Gulp on Ubuntu.