This article will be split in two distinct parts: the first will be more “theoretical” and will explain the main principles of Gulp and Grunt, as well as what I prefer to use;
in the second, we will show you how to build a boilerplate for your project (in both way).
As front-end developers, we are often faced in our daily work with recurring and time consuming tasks. For the sake of efficiency and comfort of work, we have listed a few things that could improve the workflow of our team:
Fast and automated creation of a common working environment.
Automation of tasks such as image compression, JS files concatenation or SASS files compilation.
To meet these needs, two tools are in competition: Grunt and Gulp.
Grunt and Gulp are two task runners that automate most tasks (compilation, test creation,…), saving time and helping us to focus on the essential: development.
Ultimately, Grunt and Gulp do exactly the same job. The communities around the two systems are quite large and modules can be found fairly easily for each of the two systems. What differentiates the two is their mode of operation.
Grunt works on the principle of “per plugins” configuration. This means that each plugin must be independently configured and used in tasks. Here’s how a plugin is configured, with options, a source and sometimes a destination file:
The situation here is quite different: the different desired plugins are injected into the “pipe”.
The advantage of Gulp is that the file does not pass from one task to another, but is transformed once. This prevents handling the final files multiple times. It also use the powerful NodeJS Stream (see at the end of this article for Stream)
The disadvantage is that the same configuration for a task can be repeated multiple times. (If we take care of the HTML files in a different way, it is possible to have re-write the same code in multiple places)
Both technologies meet our needs, with the same result. The big difference is their functional approach. You may prefer to configure the entire plugins and add tasks or conversely, create jobs and inject plugins.
Next week we will dive deeper in these two technologies, with more specific examples. So stay tuned!
We are proud to introduce a new series of posts on this blog ! As you’ve maybe already read in a previous article, we use Hipchat internaly as communication tool on a daily basis within our team.
One of the most interesting and animated chat rooms is clearly the dev one, filled with tips and tricks, news of the latest technologies provided by our ongoing readings, … such quality information that from now on, we have decided to share these pieces of information with all of you.
And here is this first Belighted dev chat room summary: