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?).
Our Task Runner Of Choice
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:
- 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
- Concatenate other included scripts into one file
- Recheck for errors
- Minify Scripts
- Optimize any JPG, GIF, or PNG to make the file size smaller
- 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:
Just 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.