Gulp vs Grunt

I’m working on a web side project using Node.js and Express.js. If you’re not familiar with either of those things, I’ve linked to both of their homepages. Express.js isn’t a requirement for what I’ll be talking about here, but having a working knowledge of Node.js would be helpful.

Gulp & Grunt

Gulp and Grunt are both task runners based on Node.js. I won’t go into the nitty-gritty on what can be accomplished with both of these toolsets. If you go to their respective sites, it will do a better job explaining that than I can. What I will be discussing is just a comparison of the two on how it relates to the their config files.

The Project

After starting the project, I initially went with Grunt as that was the easiest to setup and get the project going. At some point, I decided to get the same tasks using Gulp. After porting the tasks to Gulp, I wanted to share the two files because, 1: For anyone to point out what I’m doing wrong or can do better, but 2: as a sort of reference for task translation between the two.

I’ll show the files first, and then I’ll kind of break them down.


Grunt:

Gulp:

 Breakdown

The jshint and less tasks are just for basic linting of JavaScript files and compiling LESS CSS. I know that Express will compile the LESS for me, but I want to add CSS linting at some point hence why I created the task to compile the LESS.

I did my unit tests using Mocha. I have two sets of tests, one for unit testing models and controllers, and one for doing full integration testing of the Express controllers. The unit tests just need for the app to set itself up to make sure models are registered along with other initialization steps. The integration tests actually spin up the Express serve to handle requests and interacting with the DOM.

The Grunt file has some maybe confusing pieces that I wanted to clear up. The first being thetime(grunt);. This shows how long a Grunt task takes to execute. Gulp already does that. The other piece is the loader. As seen at the bottom of other Grunt files, each plugin needs to be registered with Grunt before it can be run. The load-grunt-tasks package looks for Grunt plugins that you have installed and registers them for you. This saves many lines of repetitive code in the Grunt file.

Wrap Up

After switching everything to Gulp, I’m really happy with the result. As you can see, Gulp results in less code. One thing I also really like about Gulp is something fail to grasp is the fact that a lot of Gulp’s plugins don’t come from plugins at all. As long as a package implements the streaming standard, Gulp can use it in a task. I hope to go more into that in a future post. I more than welcome suggestions on how I can improve both of these files.