Psychedelic Grunt Plugins

A few months ago, I started to research build processes to help improve the pattern we currently follow at work. During my research I somehow ended up configuring Grunt and discovered the true awesomeness it has to offer. Unfortunately, so far I haven’t managed to integrate it into our workflow, but for my after-hours development, it has become an integral part of the way things roll.

If you haven’t investigated Grunt, stop reading and start now.

If you are already on the Grunt train then hopefully you will find some of the following plugins handy.


Run predefined tasks whenever watched file patterns are added, changed or deleted.


A grunt task to automate moving files to/from Amazon S3.


Universal CSS styleguide generator.


Make lossless optimisation of images part of your automated build process.


Start a static web server.

Honorable mentions that are semi psychedelic:

  • Complexity – Evaluates code maintainability using Halstead and Cyclomatic metrics
  • Plato – Generate complexity analysis reports with plato
  • QUnit – Run QUnit unit tests in a headless PhantomJS instance

Not so psychedelic but still awesome plugins:

  • Shell – Run shell commands
  • Sass – Compile Sass to CSS
  • CSSmin – Compress CSS files
  • Uglify – Minify files with UglifyJS
  • JShint – Validate files with JSHint.

The whole Grunt plugin ecosystem is an existing and rapidly developing environment. I’m sure the future is going to be crazy!

If you have any favourite plugins, be sure to either send us a tweet or comment below.

4 thoughts on “Psychedelic Grunt Plugins”

  1. Was a pleasure to read this brief post, it captures the enthusiasm that rose in me when I discovered Grunt and all the plugins already out there. Like you said, the future is going to be crazy (crazy good, that is!).

    Have a look at grunt-explain-us for generating “annotated source code” documentation pages like the page everyone has fallen in love with.

  2. Hi, congratulations for this article.

    Here are some plugins that I’ve used in my workflow:

    If you use bower or npm to manage your packages development, I strongly recommend

    You mentioned about the awesome Imgoptim, but it requires more than 2 third party libraries previously installed on your OS. Following the multiplatform development on my team, I created that only requests Yahoo Smushit webservive for optimizing images, you can request your own webservice if you prefer.

    Anyway, thanks for sharing your workflow, it is nice to know that some folks has diving into grunt.


Comments are closed.