What is Grunt
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.
- Jekyll (static site generator)
- Sass and Compass (CSS pre-compilers)
- 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.
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.