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
- Ubuntu 20.04 dedicated server
- A root user or normal user with sudo administrator privileges.
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.