Introduction of gulp.js

Introduction to Gulp Js

Introduction of gulp.js

Nowadays there are many ways to reduce page weight (Page weight is a measurement of the file size of a Web page that includes the combined size of all the elements of the page.) that improves page speed significantly. In this article, we will discuss about gulp tools. Gulp is a task/build runner for development tools that uses Node.js as a platform. It allows you to do a lot of stuff within your development workflow and helps you out with several tasks such as :-

  • Minification of files to reduce size. (For example: CSS, JS and Images).
  • Concatenation of files into one.
  • Compresses files into GZIP files.
  • Validate CSS and JS files.
  • SASS/LESS pre-processor to CSS.

Let’s now review Gulp installation and Implementation.

Step 1: Install Node.js

Gulp is a task runner that uses Node.js as a platform. At first we need to install node.js into our system. Install node js from .

Once Node.js is installed, open command prompt and check whether node js is installed

Step 2: Gulp Installation

Gulp should be installed using npm packages in command prompt. We will add –g flag to install gulp globally.

For Windows

For Mac or Linux

Step 3: Setting up project (Use sudo for Mac/Linux commands).
Initialize npm into your project directory.

Install gulp in your project devDependencies

Create gulpfile.js in your project directory

Run gulp

The default task will run automatically. If we want to custom task or run individual task then

Step 4: Gulp plugins Installation

Gulp uses plugins to perform various tasks. Each gulp plugin is designed to perform particular task. Find more about gulp on  At first we will create sample task to check  quality of javascript code using jslint.

Install jslint gulp plugin in your project directory command prompt

Open gulpfile.js and create task to validate javascript file using gulp (

To run jslint gulp task in command prompt

Step 5: Install multiple plugins to create one task

We will do create one operation with combine and minify CSS files into one single file using gulp. Install all gulp plugins metioned below:

Step 6: Combining Multiple Tasks

Let’s assume that there are few gulp tasks such as:

  1. cssTask – Combine and Minify CSS.
  2. jsTask – Combine and Minify JS Files.
  3. imgMinify – Minify all images.
  4. jsLint – Validate all js code.

In gulp, we can combine all individual tasks into single task.

By above process, we can create gulp tasks to reduce frontend load and increase page speed significantly.

Ending Notes

Gulp is a task runner that uses Node.js as a platform. It purely uses the JavaScript code and helps to run front-end tasks and large-scale web applications. Gulp builds system automated tasks like CSS and HTML minification, concatenating library files, and compiling the SASS files. These tasks can be run using Shell or Bash scripts on the command line.

No Comments

Post A Comment