Essential Grunt Plugins

Donna Peplinskie

At jQueryTO this past weekend, David Mosher talked about liberating the front end by using Node.js and Grunt to move your HTML, CSS and Javascript to a more modern workflow. Here’s his list of essential Grunt plugins:

    • grunt-contrib-jshint – Validates files using JSHint.
    • grunt-contrib-concat – Concatenates files together into a single file. For example, you can write all of your Javascript in multiple files to keep things organized, but then combine them together into one file using this Grunt task. Rather than just concatenating and minifying your files during deployment, David recommends doing this during development as well so that you mimic production as closely as possible. The only problem with doing this is that it makes debugging difficult, but that problem can be overcome by using source maps (see more on this below).
    • grunt-contrib-watch – Runs predefined tasks whenever watched files are added, changed or deleted. You can use this task to live reload the page.
    • grunt-contrib-less – Compiles LESS files to CSS, although this task is only essential if you are actually using LESS.
    • grunt-contrib-copy – Copies a file from one directory to another. This Grunt task also supports regex replacements, which got me thinking, has anyone out there ever used this to change test URLs to production URLs during deployment for files that are shared across multiple apps?
    • grunt-contrib-clean – Clears files and folders, particularly useful when you need to clean out the build folder before rebuilding.
    • grunt-contrib-uglify – Minifies files using UglifyJS.
    • grunt-open – Opens URLs and files from a Grunt task. You can use this to automatically open a web browser to the URL of your app.
    • grunt-concat-sourcemap – Concatenates files and generates a source map. You’ll need to turn source maps on in Chrome’s DevTools by selecting the Enable JS source maps option.

This is by no means an exhaustive list, but should give you an idea of what is possible using Grunt.

What Grunt plugins do you use in your workflow that you can’t live without?