Getting Started with Gulp Javascript Task Runner

by Cassandra Wilcox

This tutorial is part of a series on Gulp:

As a developer how you work is just as important as what you are working on. You should be focusing on writing good code and reducing the overhead involved with building and serving your application. Gulp can can help you achieve this by allowing you to define and run automated tasks to compile, minify, build and serve your code.

Gulp is javascript task runner. It has become the more popular than Grunt, which came before, because it can be much more powerful in fewer lines of code. However, because its new, there isn't as much help available on the topic.

Grunt vs. Gulp

A quick note on the differences between Grunt and Gulp from http://www.sitepoint.com/introduction-gulp-js/

  • Grunt plug-ins often perform multiple tasks; Gulp plug-ins are designed to do one thing only.
  • Grunt requires plug-ins for basic functionality such as file watching; Gulp has them built-in.
  • Grunt uses JSON-like data configuration files; Gulp uses leaner, simpler JavaScript code.

Another thing to note about Gulp is that it utilizes streams while Grunt does not which means Gulp is able to read a source, perform several transformations on the data, then save the results. Because Grunt must perform a read and write for every transformation of the source, it ends up performing much slower than Gulp.

Getting Started with Gulp

To get started you'll need to make sure you have Gulp installed globally on your machine.

npm install gulp -g

If this doesn't work for you, you may need to prefix the command with sudo to grant administrator access.

sudo npm install gulp -g

Next, install gulp to your project. In your projects root directory, run:

npm install gulp --save-dev

You should now see a gulp folder show up in your node_modules directory.

**Update:** If you are using the latest version of Node (v5.0.0) your `node_modules` directory will have far more directories in it than the single `gulp` directory because it uses the latest version of `npm` which has adopted a flat dependency structure. In previous versions, all of these extra dependencies are contained within the single gulp folder. To keep things simple this tutorial will continue to assume the use of Node v0.12.0.

Now that you have gulp installed, you can create your gulpfile.js. This file is required and should always be placed in the root of your project directory. It defines all of your gulp tasks.

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

    gulp.task('default', function(){
      // Default task code
      console.log('GULP GULP GULP')
    });

First, we define a gulp variable that requires the gulp module that we installed earlier. Then we define a default gulp task with gulp.task();. Gulp tasks take two arguments, the task name, and the function that runs the actual task.

Running the command gulp in your terminal will perform this default task. You should see the following output:

[gulp-demo] Using gulpfile ~/WebDevelopment/gulp-demo/gulpfile.js
[gulp-demo] Starting 'default'...
[gulp-demo] GULP GULP GULP
[gulp-demo] Finished 'default' after 51 μs

First, you'll see that it finds and uses your gulpfile. Then, it starts the default task, logs the string GULP GULP GULP, and, finally, it finishes the default task.

Now, we can use gulp to do some real work! In the next tutorial, we will learn how compile SCSS to CSS.