by Stefano Grassi

Gulp! I Improved my Workflow!

yet another hands-on experience with Gulp.js

Jökulsárlón, Iceland by Jeremy Goldberg

Unless you’ve been living under a rock for the past few years, the number of tools at the disposal of front-end developers have grown rapidly. What we have now is a wide range of projects dedicated to speed-up, automate and increase the quality of our workflow.

For example, just imagine:

Some years ago this sounded more like a Disneyan dream but we’re living in the future, so fear not! Grunt, Mimosa, Broccoli and Gulp to the rescue!

Each system has its own strong points. I’ve chosen Gulp for my needs but make sure to check them all out before deciding which best suits you.

So… gulp? What’s that?

gulp — The streaming build

As its site states, Gulp is a “streaming build system” which means that you can set your own tasks to be run on a pipeline, monitor a folder for a change and re-run.

And it’s super simple.

That’s ingenious, if I understand it correctly.
It’s a Swiss watch.
Yeah, the beauty of this is its simplicity.

Gulp Basic Concepts

Let’s sip through the main elements

aka the action you want to achieve. Managing CSS? Generating the docs?
Gulp define them with orchestrator, a module that allows us to define dependencies and maximum concurrency

gulp.task(‘somename’, function() { // Do stuff});
aka the folders you want to keep checked for changes‘folder/*.ext’, [‘firstTask’, ‘secondTask’]);

Every stream originates from a source(s) matching a specific glob (a pattern that a file needs to match)

gulp.src(globs[, options])

a series of pipes (actions)


and a destination defined with

gulp.dest(path[, options])

To operate, gulp needs two core files, package.json and gulpfile.js.
(For the installation of gulp, follow the official docs)


In the gulpfile we’ll declare which plugins are we going to use, the tasks we want to run, which folders we’re going to watch, etc…


The package.json file is used to store all the information regarding the dependencies of the project (gulp included!).

  • To create it
$ npm init

You’ll be prompted to enter some basic info for the heading of the file, like the author name, the project name and so on.

  • To install a plugin and save the dependency on the json file
$ npm install --save-dev yourPluginName
  • To uninstall a plugin and remove the dependency on the json file
$ npm uninstall --save-dev yourPluginName
  • If you need to install all the dependencies from a compiled package.json
$ npm install

Project Organization

This is my approach to organize the folder of a project managed with Gulp

Plugins FTW!

Gulp has an impressing list of plugins (1895 at the time I’m writing this article)

gulp.js plugin registry
Discover gulp.js

Must Have

  • gulp-load-plugins
    This lazy-loads the plugins installed in your project. You assign a variable to it, and use it to reference other plugins instead of repeating the requirement declaration for every other plugin.
var $ = require('gulp-load-plugins')();
// Example for gulp-concat.pipe($.concat('main.js'))
  • browsersync
    page refresh at any change on every device connected to the same URL (localhost or LAN)
  • sitespeed
    my favourite tool for performance testing
  • uncss
    are you using a CSS framework like Bootstrap for a landing page?
    You NEED this.

What? How do I update Gulp plugins, you ask?

$ npm install -g npm-check-updates
$ npm-check-updates -u
$ rm -fr node_modules
$ npm install
Basically this installs npm-check-updates globally, runs it against your package.json and updates the dependency versions.
Then you just delete the node modules folder and re-install.

Note: As a general rule, and as a last resort, we better clean the npm cache with

$ npm cache clean

That’s all, folks! Thank you for reaching this point!

I hope that I kept you interested enough to check some of the links that stuffed this article. They’re there because I wanted to show my support for all the great work that fellow developers are doing for the community.