options.hide

Type: String

Default value: ""

A prefix string (usually a path), which is removed from all generated CSS class names.

Usually it is used when all images share a common root, which makes it redundant in CSS class names, and doesn't introduce name collisions.

Please note that this option is distinct from options.classPrefix, which is used to specify an arbitrary CSS class name prefix.

Examples

All examples are based on the test included with this plugin.

Example #1 (without hide)

var iconPath = "tests/icons/";
module.exports = function(grunt) {
  grunt.initConfig({
    tight_sprite: {
      sprite1: {
        src:  [iconPath + "*/**/*.{png,jpg,jpeg,gif}"],
        dest: iconPath + "sprite1.png"
      }
    }
  });
  // ...
};

grunt tight_sprite will generate a following CSS:

.sprite_tests_icons_x16_address_16 {/*...*/}
.sprite_tests_icons_x16_block_16 {/*...*/}
.sprite_tests_icons_x16_bookmark_16 {/*...*/}
/* ... */
.sprite_tests_icons_x32_address_32 {/*...*/}
.sprite_tests_icons_x32_block_32 {/*...*/}
.sprite_tests_icons_x32_bookmark_32 {/*...*/}
/* ... */

The pattern "tests_icons" repeats for every CSS class name.

Example #2 (with hide)

var iconPath = "tests/icons/";
module.exports = function(grunt) {
  grunt.initConfig({
    tight_sprite: {
      sprite1: {
        options: {
          hide: iconPath
        },
        src:  [iconPath + "*/**/*.{png,jpg,jpeg,gif}"],
        dest: iconPath + "sprite1.png"
      }
    }
  });
  // ...
};

grunt tight_sprite will generate a following CSS:

.sprite_x16_address_16 {/*...*/}
.sprite_x16_block_16 {/*...*/}
.sprite_x16_bookmark_16 {/*...*/}
/* ... */
.sprite_x32_address_32 {/*...*/}
.sprite_x32_block_32 {/*...*/}
.sprite_x32_bookmark_32 {/*...*/}
/* ... */

Now all CSS class names are distinct, and do not contain repeating sub-path.