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.


Watch

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

S3

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

Styleguide

Universal CSS styleguide generator.

ImageOptim

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

Connect

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 Comments

  1. Take a look at grunt-karma. It has nice integration with `watch` task and helps a lot with cross-browser testing.
    grunt-contrib-requirejs good choice for a project with AMD. Can be used to concatenate all modules into single file.
    grunt-jsdoc helps to generate documentation from jsdoc comments.

  2. Also look at grunt-pretty-sass for organizing your code.

  3. 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 http://backbonejs.org/docs/backbone.html page everyone has fallen in love with.

  4. 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 https://github.com/geddski/grunt-release

    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 https://github.com/heldr/grunt-smushit 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.

    Cheers!

This post currently has 4 responses. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current ye@r *