grunt-tight-sprite

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:

grunt.loadNpmTasks('grunt-tight-sprite');

The "tight_sprite" task

Overview

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

grunt.initConfig({
  tight_sprite: {
    // describe my sprite #1
    my_sprite1: {
      options: {
        classPrefix: "",
        silent: true
      },
      cwd: "tests/icons",
      src: ["*/**/*.{png,jpg,jpeg,gif}"],
      dest: "tests/icons/sprite1.png"
    }
  }
})

Options

Following options are supported and documented in excrusiating details with examples:

• options.absolute -- indicates to use an absolute path of a generated sprite image in CSS. Default: false.
• options.background -- specifies a color to be used as a background. Default: transparent.
• options.classPrefix -- prefix for generated CSS class names. Default: 'sprite_'.
• options.cssDest -- file name for a generated CSS file. Default: the same as dest, but with '.css' extension.
• options.includeExt -- include image file's extension in a generated CSS class name. Default: false.
• options.jpeg -- object, when specified it generates JPEG, or PNG when null. Default: null (PNG).
• options.includePath -- include image file's path in a generated CSS class name. Default: true.
• options.silent -- suppress all informational output to console. Default: false.
• options.template -- string template to generate individual entries corresponding to original source images in a sprite's CSS file.
• options.templateFile -- alternative way to specify a template as an external file. Default: none.

Documentation

Please consult Wiki and FAQ.

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

0.1.5 -- removed some accidental garbage.

0.1.4 -- accurate work with layouting 0 and 1 rectangle.

0.1.3 -- a bug fix.

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.