Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including grunt-multiresize with all npm packages installed. Try it out:

require("grunt/package.json"); // grunt is a peer dependency. var gruntMultiresize = require("grunt-multiresize")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

grunt-multiresize v0.3.2

Export multiple sizes from an image

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', 'Icon@2x.png', 'Icon-72.png', 'Icon-72@2x.png'],
      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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free