Linux Commands and Scripts

How to Install GulpJS on Ubuntu 20.04

In this tutorial, we shall show you how to install GulpJS on Ubuntu 20.04. You will learn to Setup GulpJS to Minify Javascript Files on Ubuntu.

GulpJS is a toolkit that helps you automate painful or time-consuming tasks in your development workflow. Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.

Use npm modules to do anything you want + over 3000 curated plugins for streaming file transformations. By providing only a minimal API surface, gulp is easy to learn and simple to use.

Prerequisites

Step 1 – Keep the server up to date

# apt update -y

# apt upgrade -y

Step 2 – Install build-essential

# apt-get install build-essential -y

Step 3 – Install NodeJS and NPM

Install the latest stable release of NodeJS.

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

# apt-get install -y nodejs

Verify the installation is successful.

# node -v && npm -v

Output:

v14.14.0
6.14.8

Step 4 – Install GulpJS CLI

Install the GulpJS CLI using following command:

# npm install -g gulp-cli

Verify the installation is successful.

# gulp -v

Setup

To use GulpJS with plugins you need a gulpfile.js file and a package.json file.

  • gulpfile.js: configures, pipes and executes tasks along with plugin management.
  • package.json: keeps in track of dependencies and their versions.

Go to your project directory.

# cd /path/to/project/

Initialize an NPM environment to create a package.json:

When prompted for a package name, use gulpjs. Press ENTER to accept the default response for all other questions. Afterward, you should see this summary.

About to write to /root/package.json:

{
“name”: “gulpjs”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“author”: “”,
“license”: “ISC”
}

Is this OK? (yes)

Type yes and press ENTER.

Install the local gulp package and the gulp-uglify plugin.

# npm install –save-dev gulp gulp-uglify

Creating the gulp task

Create a gulpfile.js in the root of the project.

# vi gulpfile.js

Import the libraries, then, define a task. The example task is named exampleTask.

const gulp = require(‘gulp’); // Import Gulp
const uglify = require(‘gulp-uglify’); // Import Gulp Uglify (Javascript minify)

gulp.task(‘exampleTask’, ()=>{ // define a task
return gulp.src(‘/path/to/javascript/files/*.js’) // source a directory full of anything ending with .js
.pipe(uglify()) // minify the stream
.pipe(gulp.dest(‘/path/to/destination/’)); // send files to a destination
});

Make sure there is at least one javascript file in /path/to/javascript/files/:

# ls /path/to/javascript/files/

Output:

file.js

Run the task.

# gulp exampleTask

Output:

Working directory changed to ~
Using gulpfile ~/gulpfile.js
Starting ‘exampleTask’…
Finished ‘exampleTask’ after 59 ms

/path/to/destination/ contains the minified file.

# ls /path/to/destination/

Output:

file.js

We have successfully installed GulpJS.

In this tutorial, we have shown you how to install GulpJS on Ubuntu 20.04.

Related Articles