Watch Me Struggle With Grunt

You’ve probably heard of Grunt. It runs tasks for web development, like compiling SASS into CSS and merging JavaScript files together.

That sounds great, but there’s something about it that seems weird and complicated to designers like me. I normally use CodeKit to do a lot of the things that Grunt boasts as its best features, but I thought it would helpful to at least know how Grunt works and be able to use it if I really needed to.

I decided to screencast my experience rather than writing about it. There are already great posts out there for beginners, but I find it helpful to watch someone do things that appear foreign or confusing. 

So, enjoy watching me suck at Grunt and figure it out for the first time. This is my very first screencast, so be kind. Or be brutal. I’m rubber and you’re glue, right?

Link References

• 24 Ways article
• Grunt Website
• Sass Task
• CSS Minify Task

Helpful Grunt Tasks

• Watch: Make Grunt a little smarter by having it run tasks when certain files change.
• Livereload: Tell Grunt to reload the browser when you save a change.
• Autoprefixer: Let Grunt add vendor prefixes in your CSS for you based on the Can I Use database.
• Concatenate: Improve your site performance by merging files together to reduce requests to the server.
• Uglify: Minify your JavaScript files for production.
• Minify Images: Squish image files to their smallest size for production.
• Connect: Automatically start and connect to a local server. Grunt will even open the browser window for you.
• SVG Sprites: Create SVG sprites from the files in a single directory.