Learning grunt – why it’s worth your time

If you are Java or C# developer, for sure you had a chance to work with build tools like maven, gradle or msbuild. Those tools allows you to automate lot’s of boring stuff you have to do during build process of your project. And here we are – for JavaScript you can find similar tools like gulp or grunt. And yes, grunt tool is the one I want to speak about.

Grunt as other similar tools in JavaScript world were created driven by community needs. There was luck of automation of boring stuff you have always to do during development if you care enough about performance of your web app. But I will be looking on that from a bit different side. If you didn’t have a chance to spend years on eating JavaScript code, and still you would like to learn what is this stuff that every good web developer is doing – grunt is giving you nice overview of such things.

Remember, the build tool is about automation of all the things happening during development. Now just looking on common tasks available for grunt users, you will be able to find things like linters (jshint for JavaScript, recess for css),  sass, coffee (compilers/translators of high level languages to css / JavaScript), concat (bundling many css/JavaScript files into one bundle file), uglify, cssmin, imagemin (all about minification of our output files), uncss (this is my favourite one, and kind of the most complex piece of work aiming to remove all unused parts of css) and watch – monitoring your changes doing rebuild on demand.

Okay, but why all of that matters? Simply, because of user experience of your web page. Now as we build single page applications, with aim of being available everywhere (responsive ui) it’s becoming important to make them as lightweight as possible, and that usually mean do as small amount of remote requests as possible (concatenating files), making the requested files as small as possible (minification) and much more. Actually on top of that, chrome development tools audit is your friend teaching about all the things you should care about.

And you know what? Besides of learning about the concepts, with grunt you can automate everything easily making it part of your daily build process.

Btw, why I chosen grunt, not gulp? I really like the way of how gulp express configuration, but it looks like it’s not mature enough to have ready to go solution for everything I need. I spent lot of time to look for something, when for grunt it was ready to take (plugins).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s