Importance of using a task runner for your next web project

grunt-gulp

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 wast your valuable time for nonsense ūüôā

What are the popular task runners ?

Grunt and the Gulp comes 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 ?

Grunt

Gulp

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
Straightforward tasks 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 a 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

Gulp

https://github.com/gulpjs/gulp/blob/master/docs/API.md

https://css-tricks.com/gulp-for-beginners/ (this is really good one)

http://andy-carter.com/blog/a-beginners-guide-to-the-task-runner-gulp

https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js

Grunt

http://mattbailey.io/a-beginners-guide-to-grunt

https://gruntjs.com/getting-started

https://scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt

 

 

 


Leave a Reply

Your email address will not be published. Required fields are marked *

Current month ye@r day *