Web developers often face repetitive tasks that consume valuable time. Activities like triggering builds or refreshing browsers might seem trivial, but they add up, stealing time that could be dedicated to actual development. Automating these tasks not only saves time but also helps maintain focus, preventing context switching that disrupts productivity.

This tutorial explores Gulp, a tool that can automate your web design and development workflow. Designers are encouraged to embrace this opportunity to enhance their workflow. Developers, on the other hand, should be able to quickly grasp the concepts and leverage Gulp’s capabilities.

Gulp is a build system built on Node.js streams, enabling an asynchronous approach to automation by transferring data between a source and a destination. Its use of JavaScript makes it approachable for developers familiar with the language. Gulp configurations consist of watchers and tasks, and thanks to a rich plugin ecosystem available through npm, huge plugin directory, tasks ranging from JavaScript concatenation to SVG-to-icon-font conversion are easily achievable.

Alternatives to Gulp

The landscape offers alternatives, notably Grunt. The Gulp vs. Grunt debate is unlikely to have a clear victor as both have strengths and weaknesses. Grunt’s reliance on configuration files often leads developers toward Gulp’s more code-driven approach. Meanwhile, GUI-based tools like Koala have emerged, attracting users who prefer visual interfaces. However, such tools lack the flexibility and extensibility of code-based solutions like Gulp.

Process Automation Fundamentals

Plugins

Plugins are the building blocks of Gulp, enabling specific actions within a workflow. They are installed via npm and integrated using require.

Tasks

In Gulp, tasks represent actions performed on files. They operate by taking input from a source, processing it through a series of plugins (pipes), and delivering the transformed output to a destination.

Globs

Globs are patterns used to define sets of files, often used to specify the source files for a task.

Watchers

Watchers monitor files for changes. When changes are detected, they trigger specific tasks to process the modified files.

gulpfile.js

The gulpfile.js is the heart of a Gulp setup. This JavaScript file houses task definitions, watchers, and any custom code needed for your automation tasks.

A Straightforward Task

To begin, you need Node.js and a command line interface with administrator rights. You can download Node.js from here. After installation, ensure npm is current by running:

1

sudo npm install npm -g

The -g flag ensures a global installation.

Install Gulp globally using:

1

sudo npm install gulp -g

This command also updates Gulp if already installed.

Download the starter kit for this tutorial from toptal-gulp-tutorial/step1. It demonstrates a basic SCSS to CSS compilation task using the gulp-sass plugin, which utilizes libsass. Libsass, chosen for its speed, powers this compilation. From your project’s root directory, install dependencies with:

1

npm install

This command parses package.json, installing listed dependencies. It’s a convenient alternative to:

1
2

npm install gulp --save-dev
npm install gulp-sass --save-dev

The --save-dev flag adds these plugins to your package.json under devDependencies, simplifying future installations.

You’re ready for your first task execution. The following command will process all SCSS files in the /scss folder, generating compiled CSS files in a corresponding directory:

1

gulp scss

Specifying the task name is crucial. Omitting it would execute the “default” task.

Code Walkthrough

This task is achieved with a mere seven lines of JavaScript, demonstrating Gulp’s elegant simplicity:

1
2

var gulp = require('gulp');
var scss = require('gulp-sass');

First, we initialize required plugins, including the indispensable Gulp:

1

gulp.task('scss', function() {

We define the “scss” task:

1

return gulp.src('scss/*.scss')

The source files are specified using globs. This example targets all .scss files within the scss/ folder.

1

.pipe(scss())

Next, the gulp-sass plugin is invoked to compile SCSS:

1

.pipe(gulp.dest('css'));

Finally, gulp.dest defines the output directory for the compiled CSS. This could also point to a single file for scenarios like concatenation.

To enhance this process, consider integrating additional Gulp plugins. For instance, gulp-minify-css can minify the generated CSS, while gulp-autoprefixer streamlines the addition of vendor prefixes.

Employing a Watcher

A watcher starter kit, available for download from toptal-gulp-tutorial/step2, provides an enhanced version of the SCSS task, complete with a file watcher. This watcher triggers the task whenever source files are modified. To start, execute:

1

gulp

This initiates the “default” task, which in turn starts the watcher. Any changes to SCSS files will trigger recompilation, with Gulp providing notifications in the command line.

Code Walkthrough

The addition of a watcher is remarkably simple, requiring only three extra lines of code. The watcher starter kit doesn’t deviate significantly from the initial example. Let’s examine the changes.

1

return gulp.src(['scss/**/*.scss', '!scss/**/_*'])

This example showcases the use of an array of globs. The first glob includes all .scss files, even those within subfolders. The second excludes files starting with “_”, enabling the use of SCSS’s @import functionality for incorporating partials, like “_page.scss.”

1

gulp.task('default', ['scss'], function() {

The “default” task is defined here, with the “scss” task set as a dependency. This ensures that the “scss” task runs before the “default” task.

1

gulp.watch('scss/**/*.scss', ['scss']);

Finally, Gulp’s watch function is used. It targets all .scss files and triggers the “scss” task whenever a change event is detected.

You now have the foundation to create watchers for various automated processes like JavaScript concatenation, code hinting, CoffeeScript compilation, and more. To further enrich your workflow, explore gulp-notify, which can be found at https://www.npmjs.com/package/gulp-notify to provide desktop notifications upon task completion. Additionally, create a dedicated task to [minify the resulting CSS code and make the “scss” task run as a dependency to that. Finally, you can use gulp-rename to append the .min suffix to processed files.

Advanced Gulp Plugins for JavaScript Automation

Gulp’s vast plugin library offers tools that go beyond basic build automation. Here are a few noteworthy examples:

BrowserSync

BrowserSync provides real-time feedback during development by injecting CSS and JavaScript changes into the browser and automatically refreshing the page. Its ghostMode feature enables synchronized browsing across multiple devices, accelerating cross-browser testing.

Browserify

Browserify analyzes your code’s require statements and bundles dependencies into a single JavaScript file optimized for browser environments. It even supports transforming certain npm packages for browser compatibility.

Webpack

Similar to Browserify, Webpack bundles modules and their dependencies into static assets. However, it offers greater control over how dependencies are bundled and doesn’t strictly adhere to Node.js conventions.

Karma

Gulp-karma integrates seamlessly with Gulp, bringing its renowned test runner capabilities to your Gulp-powered workflow. Karma aligns with Gulp’s philosophy of minimal configuration.

Conclusion

This tutorial illustrated the elegance and simplicity of Gulp as a build tool. You’ve acquired the knowledge to automate your software development workflow for both new and existing projects. The time investment in setting up a build system for legacy projects will undoubtedly pay off in the long run.

Stay tuned for an advanced Gulp tutorial coming soon.