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!

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.