grunt-multiresize

grunt-multiresize

Export multiple sizes from an image

Getting Started

This plugin requires GraphicsMagick and Grunt ~0.4.1

First download and install GraphicsMagick. In Mac OS X, you can simply use Homebrew and do:

brew install graphicsmagick

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-multiresize --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-multiresize');

The "multiresize" task

Overview

In your project's Gruntfile, add a section named multiresize to the data object passed into grunt.initConfig().

grunt.initConfig({
  multiresize: {
    target: {
      src: 'path/to/source',
      dest: ['path/to/dest1', '/path/to/dest2'],
      destSizes: ['72x72', '114x114']
    }
  },
})

Task

src

Type: String

The original file to be resized.

dest

Type: String or Array

The files to be written by this script.

destSizes

Type: Array

The image dimensions expected. The format can be witdhxheight or n%.

Options

options.background

Type: String

Background color, default transparent. The format described here.

options.quality

Type: String

Quality of output image, default 100.

Usage Examples

Outputting all icons

This project was originally created to resize our project icons to conform to CoronaSDK spec. This is our config file.

grunt.initConfig({
  multiresize: {
    iOS: {
      src: 'orig/Icon-512.png',
      dest: ['Icon.png', '[e-mail]', 'Icon-72.png', '[e-mail]'],
      destSizes: ['57x57', '114x114', '72x72', '144x144']
    },
    Android: {
      options: {
        background: '#ffffff'
      },
      src: 'orig/Icon-Android-512.png',
      dest: ['Icon-ldpi.png', 'Icon-mdpi.png', 'Icon-hdpi.png', 'Icon-xhdpi.png'],
      destSizes: ['36x36', '48x48', '72x72', '96x96']
    }
  },
})

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

v0.1.0: Initial release