littleball.

Games, tools and other random bits and pieces.

Gulp introduction

24 Feb 2014 | development | task-runner

Gulp is a task running, that is useful for automating development tasks. In this article I will cover an introduction to using it, and why.

Grunt vs Gulp

Both Grunt and Gulp are task runners build in node. Both are well supported, and have a large number of plugins.

Grunt pros:

  • largest number of plugins

Gulp pros:

  • very quick
  • set up is done via a script

There isnt' much to separate the two, but for me Gulp wins hands down. Why, well although Grunt has more plugins, the development comminity have already translated the majority of plugins, and they have even created one that will also run Grunt tasks.

The speed at which Gulp runs means that you spend less time waiting for your site to be updated. Great for those little changes that you want to see instantly.

The main advantage for me is the ability to use a scrpit to configure it. You can set it up the way you want it set up

  • add custom logs
  • split the commands into multiple files
  • re-use code (DRY)

Installation

Installation is really simple, as long as you have node installed.

npm install -g gulp

Setup

Gulp setup can change from project to project, but the folling set up should cover the basics

New projects

Add a file called package.json with a field for devDependencies.

{
  "name": "my-new-project",
  "version": "0.0.1",
  "devDependencies": {
  }
}

To add gulp or any gulp plugins just run the following command.

npm install --save-dev gulp

Using the tag --save-dev will add this dependency to the package file, so that other developers can set up their copys of the repository the same as you.

Existing projects

It should be quick and easy setting up a new project, just run the following command:

npm install

Gulpfile.js

Each project is controlled by a file named gulpfile.js. Here is a really simple file.

var gulp = require('gulp');

gulp.taks('default', function () {
  console.log('Running the default command');
});

Once you've added the file running gulp will run this file. If you send in a command, it will look for it and run it. Otherwise it will look for a default task and run that. In the case above you would see "Running the default command" appear in the command line.

Plugins

This is where the main power of Gulp lies. Here are the plugins I've found most useful

Other plugins that I like

  • gulp-git - auto run git commands, such as branching and merging or pushing to server
  • gulp-browserify - write your JavaScript with CommonJS module format
  • gulp-bump - updates the version number in the package file (useful with the git push)
  • gulp-jasmine - run tests on your JavaScript