July 13, 2015

Much like Grunt, Gulp.js is a taskrunner that aids with automating front-end build tasks. Gulp depends on Node.js and uses a “pipe” based streaming process. This means Gulp allows you to chain tasks together in system memory and won’t write to disk until you tell it to do so. For this reason, it’s very swift. Like, Taylor swift.

Gulp.js Logo

Why Gulp? Why not Grunt? Why anything at all?

Task runners such as Gulp and Grunt are incredibly powerful when it comes to automating tasks that are regularly cumbersome and increase overall development time. They also easily perform optimization tasks that you might not otherwise consider running during each iteration of your build. Image minification, JS & CSS minification, linting, compiling Sass, copying or deleting assets - the list goes on. There's plenty of discussion as to if we really need these tools, or if they add more bloat than they're worth. So far the majority of our team and colleagues are quite happy with them, but they're certainly not needed.

Grunt is a fine option for a task-runner, and we have a blog post for getting started with Grunt as well, but we've been experimenting with Gulp in recent weeks. Its more intuitive controller syntax and overall speed is swift and powerful enough to eclipse Grunt in our build process.

The Basics

Gulp relies on a few basic items to run in addition to a couple of minor file-assets: package.json and gulpfile.js. First up is Node.js - you’ll need this installed prior to installing Gulp. It’s an easy install process and can be acquired at nodejs.org/download. Once Node.js (and it’s associated npm function) is installed, open terminal and run the following:


$ npm install -g gulp

This command is telling the Node Package Manager to install Gulp globally on your system (the -g modifier).

Next you’ll want to create a package.json file in the same directory with some basic information to begin. You can use the following command to leverage NPM's inherent initialization feature:


npm init

Or you can create a package.json file manually and place some basic information within:


{ 
  "name": "my-project-name", 
  "version": "0.1.0", 
  "devDependencies": { 
  } 
}

The package.json file is used to give information to NPM that allows it to install and configure the project's dependencies.

Then you’ll need to install gulp to your local project. In terminal, navigate to your project’s theme-directory and run the following:


$ npm install gulp --save-dev

This will install Gulp to the local theme directory and will add Gulp as a dependency to package.json - doing this will greatly help your Gulp configuration’s extendability in the future.

So now you have Gulp globally, locally, and an associated package.json file ready for action. Next step is to install some Gulp plugins in order to give it the functionality you want. The following line will install the `gulp-sass` plugin for compiling my theme’s Sass:


$ npm install gulp-sass --save-dev

The above command will install the gulp-sass plugin and add a line to package.json for any future installs of your gulp configuration (very helpful for hand-offs). Normally we utilize a number of Gulp plugins for our projects - here’s a package.json file created for a recent project:


{
  "name": "zeus",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-imagemin": "^2.2.1",
    "gulp-minify-css": "^1.0.0",
    "gulp-sass": "^1.3.3",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-watch": "^4.2.4"
  }
}

As you can see, the package.json is now populated with your theme's project dependencies. This means running `npm install` within the directory will automatically install all of the associated modules for this project. This is incredibly valuable for handing off projects between other developers, other shops or clients.

Gulpfile.js

This is the config file where you’ll define the tasks you want Gulp to perform. Here’s a basic introductory gulpfile that initializes Gulp and the gulp-sass plugin for use in our tasks:


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

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

Running `gulp` through terminal while in this directory should now produce some successful messaging. Here’s an example of how we use the gulp-sass plugin to work with our Sass:


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

// Gulp Sass Task 
gulp.task('sass', function() {
  gulp.src('sass/**/*.scss')   // The location of our Sass
    .pipe(sass())              // Sass-ify
    .pipe(sourcemaps.init())   // Initializes sourcemaps
    .pipe(sourcemaps.write())  // Writes sourcemaps into the CSS file
    .pipe(gulp.dest('css'));   // Where the assets are placed
})

gulp.task('watch', function() {
  gulp.watch('sass/**/*.scss', ['sass'])
})

gulp.task('default', ['sass', 'watch']);

In the above gulpfile.js, we’ve created a task called “sass” and given it directives to perform. We’re telling it to look for .scss files (double * means all sub-directories), add some sourcemaps and place all the assets in the “css” directory (relative to the location of this gulpfile.js). Then we’ve created a “watch” task so that we can watch for any Sass asset changes, and finally the “default” task determines what Gulp performs when running the stark 'gulp' command. When running 'gulp' against the above gulpfile.js, the “default” task at the bottom is going to run the 'sass’ task followed by the ‘watch’ task. This will result in your Sass being compiled first, and then Gulp will begin watching your ‘sass/’ directory for any changes.

You can run any of these tasks individually by running gulp [taskname] in the command-line. For instance, if we just wanted to run the ‘sass’ task without the ‘watch’ task, we could simply run: “gulp sass”.

Additional Info

Gulp offers some documentation on getting started as well as a broad list of recipes and articles on using it’s swift task-runner and associated plugins.

I’ve also added a Gulp starter project to help you get going.

Good luck and Gulp-on!