Which Grunt-Plugins do you want to use?

Choose Grunt-Plugins and Veams writes the configuration for you!

Veams provides a ton of useful Grunt-Plugins. Just add them in the prompts.

General

For Grunt and our Gruntfile Veams uses the grunt module load-grunt-configs to split up the file in multiple task files. You can find these task files in the following directory:

helpers/_grunt

General Grunt Plugins

Veams provides standard Grunt plugins. These are:

grunt-concurrent

Run grunt tasks concurrently. In Veams we have a hintAndDocs task.

Link to grunt-concurrent

grunt-contrib-clean

Clean your directories. In Veams we use this module to clean up the folders _output and _dist.

Link to grunt-contrib-clean

grunt-contrib-cssmin

Minify your CSS.

Link to grunt-contrib-cssmin

grunt-sass-globber

This module provides a simple globbing functionality for Sass files like the ruby gem sass-globbing. In Veams we have a styles.scss file in which you can use globbing functionality. The plugin generates a styles.tmp.scss with all files included.

Link to grunt-sass-globber

jit-grunt

A JIT(Just In Time) plugin loader for Grunt. Veams integrates jit-grunt, because otherwise Grunt slows down with every plugin installed.

Link to jit-grunt

time-grunt

Displays the execution time of grunt tasks.

Link to time-grunt

Optional Grunt Plugins

But you can also apply additional Grunt plugins to your project. Just choose specific ones:

grunt-accessibility (QA Plugin)

Uses AccessSniff and HTML Codesniffer to grade your sites accessibility using different levels of the WCAG guidelines.

Link to grunt-accessibility

grunt-autoprefixer (CSS Plugin)

Autoprefixer parses CSS and adds vendor-prefixed CSS properties using the Can I Use database.

Link to grunt-autoprefixer

grunt-bless (CSS Plugin)

Split your css after you reach size limit for Internet Explorer 9.

Link to grunt-bless

grunt-browser-sync (Server Plugin)

Sync and auto-reload your local server over multiple devices.

Link to grunt-browser-sync

grunt-browserify (JavaScript Packaging Plugin)

Use a node-style require() or ES Harmony to organize your browser code and load modules installed by npm.

In Veams we use ES Harmony when you select this plugin.

Link to grunt-browserify

grunt-combine-mq (CSS Plugin)

Combine matching media queries into one media query definition. Useful for CSS generated by preprocessors using nested media queries.

Link to grunt-combine-mq

grunt-contrib-handlebars (JavaScript Templating Plugin)

Precompile Handlebars templates to JST file.

Link to grunt-contrib-handlebars

grunt-contrib-htmlmin (HTML and Minification Plugin)

Minify your HTML files.

Link to grunt-contrib-htmlmin

grunt-contrib-requirejs (JavaScript Packaging Plugin)

Optimize RequireJS projects using r.js.

In Veams we use Almond to provide a minimal AMD API footprint that includes loader plugin support. Almond is only useful for built/bundled AMD modules and does not do dynamic loading. Link to grunt-contrib-requirejs

grunt-contrib-uglify (JavaScript Minification Plugin)

Minify files with UglifyJS.

Link to grunt-contrib-uglify

grunt-csscomb (CSS Plugin)

The grunt plugin for sorting CSS properties in specific order.

Link to grunt-csscomb

grunt-dr-svg-sprites (Icons Plugin)

Generate SVG Sprites with scss files.

Veams provides a custom template (helpers/templates/svg-sprites/stylesheet.hbs to generate mixins and extends.

Link to grunt-dr-svg-sprites

grunt-grunticon (Icons Plugin)

Generate SVG-URI-SASS files with png fallbacks.

Link to grunt-grunticon

grunt-image-size-export (Images Plugin)

Pass a folder of images to this module and get information like width, height, filename, path and breakpoints.

In Veams we use this plugin in combination with grunt-responsive-images to automate responsive image handling.

Link to grunt-image-size-export

grunt-includes (Files Plugin)

A grunt task for including a file within another file (think php includes). Circular imports will break the recursive strategy. All includes retain parent and child indentation.

In Veams we use this module to have a simple JavaScript packaging solution.

Link to grunt-includes

grunt-modernizr (JavaScript Plugin)

grunt-modernizr sifts through your project files, gathers up your references to Modernizr tests and outputs a lean, mean Modernizr machine.

Link to grunt-modernizr

grunt-phantomas (Performance Plugin)

PhantomJS-based web performance metrics collector and monitoring tool.

Link to grunt-phantomas

grunt-photobox (QA plugin)

Plugin to prevent your project of broken layout via screenshot photo sessions of your site.

Link to grunt-photobox

grunt-postcss-separator (CSS Plugin)

Split up your Data-URI or anything else into a separate CSS file.

In Veams we use this plugin in combination with grunt-grunticon to export Data-URIs in another file and load this file asynchronous.

Link to grunt-postcss-separator

grunt-responsive-images (Images Plugin)

Produces images at different sizes (be sure you have installed GraphicsMagick).

See grunt-image-size-export for further enhancements.

Link to grunt-responsive-images

grunt-svgmin (Icons Plugin)

Minify SVG using SVGO.

In Veams we only need this for grunt-grunticon. grunt-dr-svg-sprites has already SVG minification built in.

Link to grunt-svgmin

grunt-version (Versioning Plugin)

Grunt task to handle versioning of a project.

Link to grunt-version