options.includeExt

Type: Boolean

Default value: false

A boolean value that indicates if an image file's extension should be included in a generated CSS class name.

Usually this flag is used when sources include files with the same names but different extensions. If extensions are not included, then generated CSS classes may accidentally collide.

Examples

All examples below assume following source files:

images/icons/16x16/tool.png
images/icons/16x16/help.png
images/icons/32x32/tool.png
images/icons/32x32/help.png

Example #1

Default configuration:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.png"
    }
  }
})

The generated CSS files will include following CSS classes:

.sprite_16x16_tool ...
.sprite_16x16_help ...
.sprite_32x32_tool ...
.sprite_32x32_help ...

Example #2

Include image file's extensions, while generating CSS class names:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        includeExt: true,
        hide: "images/icons/"
      },
      src: ["images/icons/**/*.png"],
      dest: "images/icons.png"
    }
  }
})

The generated CSS files will include following CSS classes:

.sprite_16x16_tool_png ...
.sprite_16x16_help_png ...
.sprite_32x32_tool_png ...
.sprite_32x32_help_png ...