The Definitive Gulp 4 Beginner’s Guide (Translation)

Introduction

Gulp is a JavaScript‑based build tool that automates many tasks in web development. Because Node.js can execute shell commands, Gulp can automate virtually anything Node.js can do, though it is most commonly used in the web development domain.

Gulp vs Grunt

Gulp’s main competitor is Grunt; both are free and open‑source. Other less popular competitors include Broccoli, Brunch, Cake, and Jake. The key difference lies in configuration: Gulp uses a gulpfile.js where tasks are defined by chaining functions, whereas Grunt uses a large object literal in Gruntfile.js. Gulp typically runs faster because it streams data between tasks instead of writing temporary files.

Gulp and Node.js

Gulp requires Node.js, which is cross‑platform (Windows, macOS, *nix). Enabling the --harmony flag allows use of some ES6 features. On *nix you can create an alias: alias gulp6='node --harmony $(which gulp)' and place it in .bashrc to run gulp6 instead of gulp. On Windows a similar alias can be created with doskey.

Plugin Ecosystem

As of 25 May 2015 there were 1 711 Gulp plugins. Common tasks include linting HTML/CSS/JS/JSON, compiling ES6 to ES5, running tests, concatenating/minifying assets, serving static files, executing shell commands, watching file changes, and live‑reloading browsers.

Gulp 4 is not backward compatible with Gulp 3, so upgrading requires updating gulpfile.js, though most v3 plugins still work.

Installing Gulp

Global installation (latest stable) uses: npm install -g gulp To install the development version of Gulp 4:

Open a terminal.

Ensure Git is installed.

If a previous Gulp exists, uninstall it with npm uninstall -g gulp.

Install Gulp 4 via npm install -g gulpjs/gulp-cli#4.0.

For a project‑local installation:

Open a terminal and navigate to the project root.

If package.json is missing, run npm init.

If a lower‑version Gulp is present, uninstall it with npm uninstall gulp --save-dev.

Add Gulp as a dev dependency: npm install gulpjs/gulp.git#4.0 --save-dev.

Create a gulpfile.js (shown later).

Running npm install --save-dev adds the plugin to node_modules and makes it importable via require in the gulpfile.

Running Gulp

Basic commands: gulp --help or gulp -h – help. gulp --version or gulp -v – shows global and local versions. gulp --tasks or gulp -T – displays the task tree. gulp --tasks-simple – flat list of tasks. gulp --verify – checks for blacklisted plugins. gulp [options] task1 task2 … – runs specified tasks (parallel by default).

If no task name is given, Gulp runs the default task; if no default is defined, an error is shown.

Gulp Plugins

Key plugins include: gulp-babel – ES6 → ES5. gulp-changed – processes only newer files. gulp-concat – concatenates files. gulp-csslint – CSS linting. gulp-eslint – JavaScript linting. gulp-jasmine – Jasmine tests. gulp-jshint – JSHint linting. gulp-jscs – code style checking. gulp-less – LESS → CSS. gulp-livereload – browser live‑reload. gulp-plumber – prevents pipe breaking on errors. gulp-sourcemaps – generates source maps. gulp-uglify – JavaScript minification. gulp-usemin – replaces HTML asset paths with minified versions. gulp-watch – watches files for changes.

The del npm package is also commonly used for deleting files/directories.

Gulp API (Gulp 4.0)

The API is provided by the Gulp and Undertaker classes. Gulp offers src, dest, and watch. Undertaker adds task, series, parallel, get, set, tree, and registry. Both classes inherit from Node’s EventEmitter.

Glob patterns ( ?, *, **) are used to match file paths; they are implemented by the node-glob module.

src Method

Creates a stream of Vinyl file objects from a glob and optional options passed to node-glob. Usually no options are needed.

dest Method

Writes the incoming stream to a destination folder; can be called multiple times to output to several locations.

watch Method

Watches files (using the gaze module, later replaced by chokidar) and runs specified tasks when changes occur.

task , series , parallel

task

defines a named task. series returns a function that runs tasks sequentially; parallel runs them concurrently.

Defining Gulp Tasks

Because Gulp runs on Node.js, any Node core module or npm package can be used inside gulpfile.js. Example of a simple task:

var gulp = require('gulp');

gulp.task('hello', function () {
    console.log('Hello, World!');
});

Using ES6 arrow syntax:

let gulp = require('gulp');

gulp.task('hello', () => console.log('Hello, World!'));

Typical task patterns:

gulp.task(name, function () { ... });

gulp.task(name, gulp.series(...));

gulp.task(name, gulp.parallel(...));

A full example gulpfile (excerpt) demonstrates tasks for cleaning, serving, linting, compiling LESS, transpiling ES6, testing with Jasmine, and watching files. It uses gulp-load-plugins (aliased as pi) to lazily require plugins.

Static File Server

Using the connect and serve-static modules, a task can start an HTTP server:

var connect = require('connect');
var http = require('http');
var serveStatic = require('serveStatic');

gulp.task('connect', function () {
    var app = connect();
    app.use(serveStatic(__dirname));
    var port = 8080;
    http.createServer(app).listen(port);
});

Running gulp connect serves the project at http://localhost:8080 .

Watching Files

Example watch task for LESS files:

gulp.task('watch', function () {
    gulp.watch('styles/*.less', gulp.series('less', 'csslint'));
});

Live Reload

The gulp-livereload plugin works with a Chrome extension. Configuration steps: Install gulp-livereload . Add <script src="http://localhost:35729/liverload.js"></script> to the HTML entry. Call livereload.listen() inside the watch task. Invoke livereload() after processing changed files.

Typical Usage

Open a terminal, navigate to the project, run gulp – starts the server and watches.

Keep the terminal visible to monitor output.

Open the project in a browser with LiveReload enabled.

Edit source files; observe automatic task execution and browser refresh.

Future of Gulp 4

Development updates from the main Gulp maintainer in early 2015 indicated delays due to illness and funding milestones. As of summer 2016, Gulp 4 had not been officially released, but many teams were already using the development version in production.

Conclusion

Gulp is a popular, powerful automation tool for web development that has largely overtaken Grunt. If you haven’t tried Gulp yet, the guide encourages you to start experimenting.