Home

Welcome to the grunt-tight-sprite wiki!

This plugin is a grunt task harness for an efficient sprite packing implemented by tight-sprite engine, which uses well-known mathematically sound and fully documented algorithms.

Following documentation is available:

• Getting Started -- describes how to use the plugin.
• Workflow -- how to setup a sane workflow with grunt-tight-sprite, and why.
• FAQ -- you know what FAQ is :-)

All available options documented with multiple examples:

• General options:
  • options.silent suppresses all informational output to console. Default: false.
  • options.cssDest is a file name for a generated CSS file. Default: the same as dest, but with '.css' extension.
  • options.jpeg is an object, when specified it generates JPEG, or PNG when null. Default: null (PNG).
  • options.background specifies a color to be used as a background. Default: transparent.
• CSS generation options:
  • options.absolute indicates to use an absolute path of a generated sprite image in CSS. Default: false.
  • Control CSS class names:
    • options.classPrefix is a prefix for generated CSS class names. Default: 'sprite_'.
    • options.includeExt includes image file's extension in a generated CSS class name. Default: false.
    • options.includePath includes image file's path in a generated CSS class name. Default: true.
    • options.hide removes a prefix (usually a path) from a generated CSS class name. Default: "".
    • options.dotSeparator is a string, which is used to replace . symbols in path names before creating a CSS class name. Default: "_".
    • options.pathSeparator is a string, which is used to replace / or \ symbols (depends on user's platform) in path names before creating a CSS class name. Default: "_".
• Template-related options:
  • options.template is a string template to generate individual entries corresponding to original source images in a sprite's CSS file.
  • options.templateFile offers an alternative way to specify a template as an external file. Default: none.
  • options.templateParams offers a way to pass arbitrary parameters to a template. Default: {}.

Useful recipes (how to improve your sprites even further):

• Best practices: CSS for sprites.
• Rebuild sprite on demand with newer.
• Rebuild sprite dynamically with watch.
• Compress PNG with zopflipng.
• Compress JPEG with jpegtran.
• Compress to WebP.
• Serve WebP with nginx conditionally.
• Compress to JPEG XR.

If you have any questions, do not hesitate to email me. You can open issues for found bugs or enhancement ideas in Issues.

Happy sprite hunting!