Getting started with Gulp

2012, Nov 09

What is Gulp?

Gulp is an open-source task-runner built on NodeJS.

Gulp is one of few tools that you can use to tell the computer to automate some the manual tasks. One need to get things done quickly for that presentation on Monday where you demo that client website. If you perform repetitive tasks while coding for the browser, continue reading you won't regret it!

Why use Gulp?

Gulp is very helpful in automating development workflow tasks, such as:

  • Including browser prefixes to your CSS.
  • Compiling Sass or Less code into CSS.
  • Doing tasks when a file gets saved (e.g., prettify, inject CSS in the browser without reloading the page).
  • Optimizing assets for production (JS, CSS, images, HTML).

Gulp can do these and much more by making use of Gulp plugins. Each plugin performs only a specific task, you can connect plugins like LEGO blocks to form the final build workflow you seek. With hundreds of Gulp plugins you can fit mostly anything. However, do not worry even if you can't find a plugin for one of your task, there is guide to create your own plugin if you want.

In the next section, I'll focus more on creating a simple build workflow that is common for when you create a website using many of Gulp plugins. I won't cover how to create your Gulp plugin. Refer to the docs to do so.

Tutorial

Install Gulp

Start by installing Gulp using npm (Node package manager). You'll need to have Node.JS installed to be able to do that!

$ npm install gulp -g

Note that, -g will install gulp globally, so you can use it for all project and run Gulp commands anywhere in your system.

Adding Gulp to your project

Consider an existing project structure like the following:

  |- src/
      |- css/
      |- assets/
        |- fonts/
        |- img/
      |- index.html
      |- js/
      |- less/
  |- build/
  |- node_modules/
  |- package.json

You'll need to add Gulp to your devDependencies by running:

$ npm install gulp --save-dev

Now, start by adding a file named gulpfile.js to the root where you require the gulp package.

// gulpfile.js
var gulp = require('gulp')

Define a Gulp task

Now that Gulp is part of our project we can start adding tasks. A task can be as simple as executing a single command or combination of other tasks. Fundamentally, our LEGO block.

To define a task:

gulp.task('task-name', function () {
  // Task code to execute
})

For example:

gulp.task('greeting', function () {
  console.log('Gulp say Hi!')
})

which can be executed by running:

# gulp <task-name>
$ gulp greeting

By default, gulp command will look for tasks defined in the gulpfile.js.

Tasks to Automate

One of the repetitive tasks is compiling Less/Sass files into CSS. Let's have a look at how would gulp help with that.

Two gulp plugins to install would help with that. Continue by installing following packages:

  • gulp-less LESS plugin for Gulp
  • gulp-watch creates a watcher that will spy on files that matching a glob.
$ npm install gulp-watch gulp-less --save-dev

By adding the following in gulpfile.js:

// gulpfile.js
var gulp = require('gulp'),
  less = require('gulp-less'),
  watch = require('gulp-watch')

gulp.task('less', function () {
  gulp
    .src('src/less/**/*.less')
    .pipe(watch())
    .pipe(less())
    .pipe(gulp.dest('src/css'))
})

Things to note here:

  • gulp.src reads all source files with .less extension under src/less. As defined with that glob pattern src/less/**/*.less.
  • gulp.dest defines the output or destination directory which is src/css in that case.
  • gulp-watch watches for any changes happen on source "LESS" files.
  • gulp-less will do LESS compilation

By executing following command you can see that gulp started a watch process and waiting for any changes to happen on source files:

$ gulp less

you can add this to your package.json scripts as well:

{
  "scripts": {
    "build:css": "gulp less"
  }
}

Try it!

Conclusion

Ok, I admit that it can be a bit hard to consume. However, if you're like me, had a fair share of manual repetitive work on every save/update you make to your files then it's worth giving Gulp a try. Thank you for reading! Let me know how it goes.

# workflow# productivity# how-to