What Is Gulp?

Gulp is a task runner based on Node.js. It can easily automate repetitive work and frontend build tasks.

Tags:

Web development involves many tasks. Modern websites must support not only desktop layouts but also mobile layouts, and they must load quickly even on slower mobile networks. For that reason, work such as the following is often required.

Browser compatibility handling, bundling, and minifying CSS
Bundling and minifying JavaScript
Lossless image compression

Doing these tasks manually is tedious and time-consuming. Task runner tools were created to automate this kind of work. A task runner is a general term for tools that automate many development tasks. This article explains one of the popular tools, Gulp.

What Is Gulp?

Gulp is a task runner specialized for HTML, CSS, and JavaScript coding, that is, frontend development.

There are several similar tools, but Gulp has these characteristics.

It runs on Node.js and can be used on both Windows and Mac.
Its configuration file is JavaScript, so frontend developers can handle it easily.
It can run multiple processes at the same time, so it is fast.
It has many plugins.

Speed is one of its strengths, but Gulp’s biggest advantage is its rich plugin ecosystem and active community.

Gulp official site: http://gulpjs.com/
Repository: https://github.com/gulpjs/gulp

What You Can Do with gulp

By using gulp plugins, you can fully automate the following tasks.

Minifying CSS and JavaScript

During development, text files such as CSS and JavaScript should be readable by humans. In production, however, the browser only needs to interpret them, so unnecessary parts such as spaces should be removed as much as possible. This reduces load time and power consumption, and Google also recommends it because it can affect search ranking.

Automatically Compiling Sass and LESS to CSS

In web development, CSS is often written with CSS preprocessors such as Sass and LESS instead of writing CSS directly. This makes styles concise and easier to read than plain CSS. Files written in Sass or LESS are eventually compiled to CSS, and during CSS compilation prefixes can also be added automatically.

Compressing Images

On ordinary sites, images account for most of the site’s data size. Therefore, images should be compressed without reducing quality. Metadata related to images can also be removed to reduce file size. PNG images in particular can sometimes be compressed by more than 70%, so it is worth running this process.

Watching CSS Changes in Real Time

If you create a gulp watch task, it can monitor files and run processing whenever they change.

Installing and Using Gulp

Preparation

Gulp runs on Node.js, so Node.js and npm must be installed for your environment. This explanation assumes Node.js is already installed.

If Node.js is not installed yet, install it first by referring to the following page.

Node.js | Preparing to Use Node.js

Creating a Project Folder

After installing Node.js, create and initialize a project folder. Here the project folder name is gulp-tutorial.

mkdir gulp-tutorial
cd gulp-tutorial
npm init

During initialization, npm asks several configuration questions, but you can simply press Enter through them.

Installing gulp

Gulp is installed with npm. It can be installed globally, where it can be used anywhere on the computer, or locally, where it can be used only under the specified directory.

Global Installation

Install gulp globally as follows.

npm install gulp -g

After installation, check the version.

% gulp --version
CLI version: 2.3.0
Local version: Unknown

Remove global gulp installation

To remove it, run: ```zsh % npm uninstall gulp -g ```

Local Installation

To install gulp locally, move to the working directory, here gulp-tutorial, and run:

npm install gulp --save-dev

If installation succeeds, gulp --version shows a local version.

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

Installing Plugins

Gulp alone cannot do much, so install plugins next. Here we install a CSS minifying plugin, gulp-cssmin, and a renaming plugin, gulp-rename.

npm install --save-dev gulp-cssmin gulp-rename

This completes the installation process.

Creating the Configuration File

Create a file named gulpfile.js in the project root and write the automation settings.

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');

gulp.task('cssminify', async function () {
  gulp.src('style.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('.'));
});

Gulp tasks are written like a pipeline that flows from top to bottom, so it is easy to see what they do.

Creating a CSS File

Create the CSS file to process. Use the file name style.css.

.content {
  width: 100%;
  height: 200px;
  padding: 5px 10px 5px 10px;
}

Running a Gulp Task

Because the task name in gulpfile.js is cssminify, run:

gulp cssminify

After execution, style.min.css is generated in the project directory, and its contents are minified.

% cat style.min.css
.content{width:100%;height:200px;padding:5px 10px}%

Creating an Automatically Running Task

Running the command manually every time is inconvenient, so create a task that monitors CSS file changes and runs automatically.

Add the following to gulpfile.js.

gulp.task('watch', function() {
    gulp.watch('style.css', gulp.series('cssminify'));
});

The watch task monitors the specified file and runs the specified task when it changes.

gulp watch

When file monitoring starts, saving the CSS file runs the task and updates style.min.css.

Summary

This article briefly introduced how convenient Gulp can be. In addition to CSS minification, Gulp can automate many other tasks. Since many Gulp features are published as plugins, look for plugins related to your development work and automate them. Saving a little time every day can save a large amount of time in the long run. Use Gulp to speed up your web development workflow.