Eugene Lazutkin edited this page Jul 11, 2014 · 25 revisions

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.fragment treats template as a fragment for individual images, when set, and as a complete sprite CSS template otherwise. Default: true.
    • options.templateFile is a name of an external file with a template to generate a custom CSS file. Default: none.
    • options.templateParams offers a way to pass arbitrary parameters to a template. Default: {}.
    • deprecated since 0.2.0: options.template is a string template to generate sprite's CSS file.

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

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!