Grunt JS

2 minute read

What is Grunt

Grunt is a JavaScript Task Runner.
That’s it. Thank you for reading my first blog post.

The real deal

Grunt is designed to make your front-end development workflow a lot easier. Let’s make this more clear with an example.

While working on the De Standaard, read more about this project, we used various tools for building the templates.

That made a total of 3 Terminal windows (Command Line Interface) watching for code changes on CSS and HTML , 1 RequireJS Build command in Sublime Text 2 and 4 manual commands in the BlessCSS Teminal windows. Quite the burden when you need to do just a few simple changes to the source code. That’s when @stevenbenisek had the wonderful idea to introduce Grunt in our workflow. With a Grunt plugin for each of our tools this could all run in just one Terminal window and not one single manual interaction is required, except the initial $ grunt command at the start of your working day.

Getting started?!

Read the Getting started guide on the Grunt website it has some good step-by-step instructions.

Basically it comes down to creating a Gruntfile.js file (with the tasks) and a package.json (with meta information). Here’s an example

Taking it a step further

There are some crazy Grunt plugins out there that can do a lot of heavy front-end lifting for you. There’s this FTP deploy plugin that you could use to automatically upload any changes to your code to the remote (production) server. Handy if your editor/IDE doesn’t support “publish to FTP on save”. Browse through the repository to find the ones you need.

Another step is automating the creation of your Gruntfile.js. If you find yourself repeating the same process over and over again when you start a new project than maybe it’s time to take a look at Yeoman.io. Lately I start projects the same way. Building a static site with Jekyll for HTML templates, adding Sass and Compass and configuring my Grunt settings. With Yeoman you can automate this workflow. More about this in a future blog post.

Edit: Apparently @wolfr_ wrote a blog post about Happy Plan, a static file generator using jekyll, compass, fontcustom and grunt. One step closer to an automated workflow.