What is a task runner ?
Task runner can do automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes.
After configuring a task runner you and your team will realize how much spend your valuable time for nonsense 🙂
What are the popular task runners ?
Grunt and the Gulp come first to my mind there are more .. please google…
Grunt : https://gruntjs.com/
Gulp : http://gulpjs.com/
Brunch : http://brunch.io/
So what is the best ?
|Tasks are stored in a temporary folder
|Tasks are stored in memory without the need of temporary files or folders
|Execution speed is a little slower while opening and closing temp files
|Execution speed tends to increase, nearly doubling
|Grunt has been around for longer time, and has a larger more robust community
|Gulp is relatively newer but has a small community that is growing larger every day
|Configuration over coding
|Coding over configuration (stream-based)
|Tasks run sequentially
|Gulp is asynchronous, tasks might run in parallel
|Simpler, no need to understand how piping works
|Knowledge of pipe system is required
|More packages and plugins available
|Offers more flexibility while building your tasks
|Used in bigger production sites
|Less common in big sites, files tend to be shorter
Both grunt and gulp behave same way and run on node, but I have selected gulp for few project because of the simplicity of codes , faster, has a neat API, but is lacking the user base.
But if Grunt already works well in your project, why bother to change:). For the newcomers, I think it’s still worth a try for Gulp. ( just my idea )
How help task runner for a front-end/UI engineer ?
Most of UI engineer codes styles using sass or less Preprocessor because stylesheets are getting larger, more complex, and harder to maintain. This is where a sass or less can help. And also features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
Basically, you are writing .scss file or .less file and need to convert it to .css file and watch the changes in real time on your browser. If you are doing it manually it takes more time to do a single change. but a task runner can watch your changes compile and sync it to real-time with your browser so you need not to worried about
there are lot of css compiler like koala , compass but they do only compiling your .scss or .less file but a task runner can do a supper smart job by doing a multiple repetitive tasks at a same time than just do the compiling your styles.
Few good articles
There are lot of articles on google. I have mentioned few good articles in the below. Please go and follow
https://css-tricks.com/gulp-for-beginners/ (this is really good one)