Grunt isn’t the easiest world to jump into if you’re new and writing a grunt file that does all the neat stuff is rather cumbersome. There isn’t one magic Gruntfile.js that’ll work for every project as often it’ll require individual tweaks to suite a particular workflow. That said, there’s all baseline list of usual features I need for every project:

To put it into human-speak: I want grunt to compile my Sass to CSS, auto prefix it (write example: add -wekbit-border-radius and -moz-broder-radius when I write border-radius) minify it (remove the white space), and generate source maps for inspect element use, and I would like my JS to hold me to writing with conventions, and uglify my code (change the var names and remove white space to make the smallest js file possible).Lastly, I want grunt to refresh my CSS file (also known as CSS injection) when I make a change so I can see the changes without having to reload.

Grunt Starter Boilerplate

Even as someone who uses Grunt daily, writing fresh Gruntfile.jses is more time consuming that I’d like so I boiled down my base feature set above into an easily installable set without any front end frameworks like Bootstrap or Foundation.

I created a GitHub Project out of it for anyone who’d like to get started with Grunt.


It includes full installation instructions for beginners too! It’s everyting you need to get started with Grunt.js.