Setup GulpJS to Minify Javascript Files on Ubuntu 19.10

Overview

GulpJS is a toolkit for automating tedious and repetitive tasks in your development environment. It can automate minification, obscuration, compiling, and more.

Prerequisites

First, set up a non-root user with sudo privileges. Click Here for instructions.

Install build-essential.

$ sudo apt-get install build-essential

Install curl.

$ sudo apt-get install curl

Installation

NodeJS and NPM

Update and upgrade your local packages.

$ sudo apt-get update
$ sudo apt-get upgrade

Install the latest stable release of NodeJS.

$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Verify the installation is successful.

$ node -v && npm -v
v13.11.0
6.13.7

GulpJS CLI

Install the GulpJS CLI.

$ sudo npm install -g gulp-cli

Verify the installation is successful.

$ gulp -v
CLI version: 2.2.0

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:

$ npm init

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.

nano 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/
file.js

Run the task.

$ gulp exampleTask
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/
file.js

For more information about gulp-uglify, see https://www.npmjs.com/package/gulp-uglify