Intro

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.

grunt-starter-boilerplate

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