Tight 2D packing of images into a sprite with a corresponding CSS.

npm install grunt-tight-sprite
2 downloads in the last day
36 downloads in the last week
150 downloads in the last month


Build Status Dependency Status devDependency Status

Tight 2D packing of images into a sprite with a corresponding CSS.

Getting Started

This plugin requires Grunt ~0.4.1

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-tight-sprite --save-dev

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


The "tight_sprite" task


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

var iconPath = "tests/icons/";
  tight_sprite: {
    // describe my sprite #1
    my_sprite1: {
      options: {
        classPrefix: "",
        silent: true,
        hide: iconPath
      src: [iconPath + "*/**/*.{png,jpg,jpeg,gif}"],
      dest: iconPath + "sprite1.png"


Please consult Wiki and FAQ.


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

  • 0.1.9 added the ability to specify dot and path separators.
  • 0.1.8 fixed an example.
  • 0.1.7 added hide option.
  • 0.1.6 added arbitrary parameters to a template. Thanks, Vladimir Lugovsky!
  • 0.1.5 removed some accidental garbage.
  • 0.1.4 accurate work with layouting 0 and 1 rectangle.
  • 0.1.3 bugfix.
  • 0.1.2 added support for skipping path from CSS class names.
  • 0.1.1 added support for file extensions.
  • 0.1.0 the initial release.
npm loves you