options.templateParams

Type: Object

Default value: {}

This is a way to pass additional parameters to a template engine. While grunt allows to use arbitrary JavaScript, which can be used to generate a template with predetermined static inclusions (see options.template), this option is more useful for passing parameters to a template specified as an external file (see options.templateFile).

An object will be passed to a template as params variable.

Examples

Example #1

A custom template, which will be referred by options.templateFile (we use the modified default here as an example):

.<%= className %> {
  background: url(<%= url %>?cacheBust=<%= params.cacheBust %>) -<%= x %>px -<%= y %>px no-repeat;
  width: <%= w %>px;
  height: <%= h %>px;
}

With this config:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        templateFile:   "../css/customTemplate.css",
        templateParams: {cacheBust: new Date().getTime()}
      },
      cwd: "images/icons",
      src: ["**/*.png"],
      dest: "images/icons.png"
    }
  }
})

It will produce a following fragment:

...
.sprite_x16_address_16 {
  background: url(sprite1.png?cacheBust=1293723384552) -1568px -144px no-repeat;
  width: 16px;
  height: 16px;
}

...

Example #1

A custom template used for debugging:

grunt.initConfig({
  tight_sprite: {
    icons: {
      options: {
        template: [
          ".<%= className %> {",
          "  /* image: <%= name %> */ ",
          "  /* short: <%= shortName %> */ ",
          "  background-position: -<%= x %>px -<%= y %>px; ",
          "  width: <%= w %>px; ",
          "  height: <%= h %>px;",
          "",
          "}",
          "\n"
        ].join("\n")
      },
      cwd: "images/icons",
      src: ["**/*.png"],
      dest: "images/icons.png"
    }
  }
})

It will produce a following fragment:

.sprite_x16_address_16 {
  /* image: /home/project/images/icons/16x16/address.png */
  /* short: 16x16/address.png */
  background-position: -1568px -144px;
  width: 16px;
  height: 16px;
}

.sprite_x16_block_16 {
  /* image: /home/project/images/icons/16x16/block.png */
  /* short: 16x16/block.png */
  background-position: -1584px -144px;
  width: 16px;
  height: 16px;
}
...