If you have ever worked with code, you’ve heard the phrase, “Keep it DRY” (” Don’t Repeat Yourself”). In other words, if you have to perform a task repeatedly, find a way to do it more efficiently–which typically means less code.
When we start developing a new project, we often find ourselves repeating the same things over and over again–things like optimizing images, minifying code, and compiling files. In some cases, we were repeating ourselves several times a minute. The time cost of these tasks adds up quickly as we make changes or create new files.
That’s terribly inefficient. Not to mention that it adds wear and tear on our fingers and keyboard keys. Task runners are here to help!
What is a Task Runner?
Task runners literally do just that… they run tasks. Coders can specify which tasks they want a task runner to perform, and it will do all the work for them.
Before task runners, if you wanted to compile Sass, run Autoprefixer, and then minify the resulting CSS each time you made a change, you would have been forced to complete each task separately. Naturally, that would get annoying really quick. Not to mention you’d waste an egregious amount of time repeating yourself. Not fun.
With a task runner, you can specify the tasks you want to complete, run it once, and it’ll do all the work for you. Save time, save money, and save the world (maybe?).
There are a bunch of task runners out there: Brunch.js, Gulp.js, Broccoli.js, Cake.js, and Grunt.js, just to name a few built in Javascript. Yes, their names do sound like something you would do during your birthday (except broccoli, that just sounds like a sad birthday), but you can use these all year round!
Our task runner of choice is Grunt.js
Our Task Runner Of Choice
We have chosen to use Grunt.js. It is the most widely supported and popular task runner on the market. It works by reading a Gruntfile that contains your task configuration in a Javascript Object. Then you run a command in your terminal to specify which task you would like to run. Easy peasy.
Your Gruntfile can be as simple or robust as you would like it to be, depending on what tasks you are running.
Typical Gruntfiles do the following tasks:
CSS
- Compile Sass into CSS
- Run Autoprefixer on the new CSS to catch any vendor prefixes we may have missed
- Minify the prefixed CSS
- Update our CSS banner with new timestamp information
Javascript
- Check our Javascript for errors
- Concatenate other included scripts into one file
- Recheck for errors
- Minify Scripts
Images
- Optimize any JPG, GIF, or PNG to make the file size smaller
Other Utilities
- Watch files for changes and rerun tasks as needed
- Run BrowserSync for testing in multiple browsers and devices at once
You can imagine how painful it would be to have to run these tasks manually. All we have to do is run one simple command:
$ gruntJust like magic, this one command runs all of our tasks and saves us from repeating ourselves.
For more information on Grunt.js, check out their documentation and start looking at Gruntfiles.
