Grunt Tutorial 1 — Introduction to Grunt

It’s always good to know why you are learning something before you start learning. So first thing is first. What is Grunt?

Definition wise Grunt is a javascript task runner. I know you will have tons of questions raised , such as ‘what kind of tasks it can run’, ‘how will these tasks improve web development’, ‘how to set the environment and integrate Grunt with our project’, etc. If you have these questions in mind I will try my level best to help you. Also in this series of tutorials I will provide some examples of tasks that I use mostly in my projects.

What do grunt offer (some usecases of grunt)?

Improve the performance of your site by decreasing the number of Http requests.

  • In most of the web applications, we will not have just one html page. We will have many style files, script files, etc. To load each external file to your browser, browser will be creating a new Http request, so the number of Http requests will increase. Higher the number of Http requests, lesser the performance is. But grunt has a solution to fix this. We will discuss more about this in a little while.

Minimization of Javascript and CSS files.

  • Minimized Files are compressed versions of source files. So it will consume less memory and reduce the load by a considerable amount. Especially when you have a huge js or css file, this will be very useful.

“sass” and “less” compilation.

  • For those who don’t know about Sass and Less, they are css tools which will allow you to write css in a different manner. With Sass and Less you can use variables, mixin and much more with css. It will reduce the pain of styling the page with CSS.

Not only these, but also we can compile experimental javascript with compilers like Babel, automate tasks and much more. At the time of writing this post there are more than 5000 grunt tasks that we can use. In this post I will cover some of the most used tasks. To see more about grunt tasks, go to grunt plugin page.

Like what you read? Give charles rajendran a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.