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.
- Jekyll (static site generator)
- Sass and Compass (CSS pre-compilers)
- RequireJS (JavaScript Module loader) and a build script
- BlessCSS (CSS splitter)
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.