When creating websites or web apps there is a huge amount of back and forth between your code editor and the browser. There are an awful lot of actions you do that are repetitive. Gulp and Grunt help automate these actions to make the development process easier. It is certainly worth taking the time to set up either of these task runners because in the long run it will save you time and effort and improve your workflow! Both tools use Node.js.
I have only worked with Gulp so far and have found it very simple to set up, configure and start using in projects. Both task runners are similar but there are some pros and cons of each which can be seen below.
Both task runners come out of the box with tonnes of functions. Some of these functions can be easily performed yourself but if you have to do them manually a hundred times a day, a task runner makes sense!
Some of the functions you may want to automate can include:
- Minifying code
- Concatenating code
- Compressing images
- Converting SVG icons for browser support
- Browser sync
- Precompiling LESS/SASS
Above are some of the more popular plugins, there are other cool ones that prevents the gulp build failing if you get an error, ones that enable on the fly language localisation, linting, running unit tests, batch renaming files and many more. More and more plugins come out every day as both are open source and have thriving comminities. There are almost 3,500 plugins currently in the Gulp plugin registry and almost 6,500 in the Grunt plugin registry at the time of writing this.
So get a sense of how many lines it takes to configure some of these functions using Gulp compared to Grunt, check out the sample below. This is the configuration necessary for optimising images on the fly.
One of the cool things about Grunt and Gulp is that you can stray from the recommended configuration settings and customize your workflow entirely to suite your own needs.
In terms of speed Gulp is the winner by a mile. Grunt have done a lot to bridge this speed gap but are still not there yet. This difference comes down to the fact that Gulp handles tasks in memory. A Gulp/Grunt speed test can be found here.
Both communities are very strong however you can see below that at the time of writing Gulp has over twice the number of Github start and over 3 times as many contributors!
Setting up Gulp and Sass and Sublime package control
- Set up Gulp globally – npm install -g gulp
- In your project folder install the plugins you require e.g. npm install gulp gulp-sass browser-sync -save-dev
- Next create a Gulpfile.js, where your configurations go
- For more info check out this post
gulp.task defines your tasks, these are the functions that you want to automate. gulp.src points to the files we want to use. gulp.dest points to the output folder we want to write files to e.g. minified code / compressed images
What about Webpack?
Webpack is a module builder that can be used as a replacement to Gulp and Grunt. Essentially, Webpack bundles many modules into a few static assets representing those modules. Webpack offers many features right out of the box, some of which are not covered by Gulp/Grunt. There will be a future post about Webpack.
So which is better!?
There is no right or wrong answer. It depends on your project needs and if your preference to configure (Grunt) or to code (Gulp). Both are free and well documented so my advice is to set them up yourself, spend some time with each and base your decision off your experiences.