These past few weeks I’ve been putting a lot of effort into learning more about Grunt. I’ve been working closely with a back-end boy at my workplace and he’s forever praising grunt. He uses it on almost all of the projects that we’ve collaborated on. He recommended some reading material and I figured it was my duty to get to grips with it.

What is grunt?

Grunt is a javascript task runner. If you’ve never heard of Grunt then you’re probably still confused. I think that sometimes you land on pages for apps, plugins and tools and even after reading their description you still don’t know what they do!

Grunt basically can run a whole range of tasks in the background whilst you’re coding away on a website. Here are some examples of what it can do.

• Compile SASS/LESS
• Compress CSS
• Minify JavaScript
• Optimize images

I’m a front-end (FE) developer so I’ve only uncovered some of the basic tasks that sound useful to me. There are so many other things that Grunt is capable of and the list seems to be growing every day.

If you’re looking for the best Grunt starter guide on the internet have a read of Chris Coyier’s article.

Getting started with Grunt is the most difficult part of the process. You need to be familiar with the command line and Grunt requires a few addition things to be installed in order for it to run properly. I’m not going to delve into how to set grunt up. I just want to offer my thoughts and opinions on it.

Don’t be worried

I must admit I was a little dubious about the prospect of using Grunt. As a FE developer who leans more to design than back-end development I don’t really like making life too technical. I can use a wide variety of tools to perform these grunt tasks and to be honest I was happy with my current set up.

However the more I spoke to my colleague the more it became obvious that using Grunt is going to be beneficial for the large projects that we work on at McCann. Although my personal set up works fine for me, it isn’t practable for other developers who don’t have MacBook’s. We needed a universal way where all developers can work on projects and not be restricted in what they can and can’t do. Grunt is a good answer to this problem.

Cool stuff

Once set up Grunt can do some pretty cool stuff. Just one simple grunt command is all you need and your tasks will run. The good thing is that you can use a ‘watch’ task, meaning that every time a file is changed the grunt tasks will run automatically. You use the watch task in combination with livereload to make any changes appear dynamically in your browser too.
As I said previously there are tons of things you can do with it and I really need to delve a little deeper to improve my knowledge.

It has its uses

Grunt is ideal for larger projects and teams. Everyone using the same tools ensures that we’re all on the same wavelength.

Here are some important factors

• It can be used on any machine. Windows or Mac.
• Working on such big projects may mean that we have separate development and deployment sites. You can easily set up a grunt task that will deploy either or both if needs be. Conditional statements are used in the files to dictate what goes where.
• It speeds things up. For examples I don’t have to compress all my images or minify my JS manually.
• Its extensible and integrates with plenty of other stuff (e.g. compass).
• Fantastic documentation online supported by a rapidly growing community.

Will I use it?

I think that for some of the personal projects that I do at home Grunt is overkill. Most projects I embark upon might only need some basic tasks. Say I’m building a static site that needs to pull partials in. I would use Hammer for that. If I’ve some SASS that needs compiling I would just drag and drop the project into Codekit. If I don’t think Grunt is going to benefit me then I wouldn’t bother wasting time with the setup. However I will be using it on every project at work from now on.

Oh, I integrated my Grunt into my FE base template. You can view the Github repo here.

• Article
• JS/jQuery
• Web Design