Create one hash per "group" of assets (eg. for Retina/hidpi pairs)

[steveluscher]

There's a technique in the wild where you can use an in-browser HTML preprocessor to replace instances of "foo.png" with "[email protected]" depending on the client's display resolution. It's pretty awesome. It works like this (just imagine a string replacement on src rather than whatever's going on in that example).

Of course, asset hashing breaks this. There's no replacement I can perform on 3d15f.foo.png to end up with [email protected].

What's your opinion of a feature that would allow you to hash assets as a group? I would love it if grunt-rev would allow me to specify that files matching the pattern *.png and *@2x.png belong to a group of files that should all share the same hash.

Thoughts?

[harperrg]

I agree on this one, would love to see a solution for it.

[farneman]

I'd like to see this feature to. In my case I'm using svgeezy to replace svg image with a png in browsers that don't support svg (IE8, etc). svgeezy works by looking up the svg filename/path and then looking for a file with the same path/name but a png extension. It would be great to be able tos et some sort of group or matching option to give the svg and png versions of a file the same hash.

[mblarsen]

I've made a pull-request that implements this feature. https://github.com/TinyCarrier/grunt-rev

You can use like this (package.json):

"devDependencies": {
  "grunt": "~0.4.2",
  "grunt-rev": "https://github.com/TinyCarrier/grunt-rev/tarball/7c763020e311cf68ec69961b22cae4ec2f9fa3c4"
}

Here is an example usage for the alt-feature:

...
rev: {
  options: {
    alt: {
      pattern: 'tmp/*@2x.{jpg,gif,png,webp}',
      identifier: '@2x'
    }
  },
  src: ['tmp/*.png']
},
...

This produces a reved file any files identified by '@2x' will get the same hash prefix. For example:

Open-Source-Logo.png
[email protected]

... becomes:

3d0793d5.Open-Source-Logo.png
[email protected]

... despite they are different images with different hashes.

You can specify alt as an object or an array of objects.

[steveluscher]

Moving my comments to the pull request! #21

[mblarsen]

Check #21 which implements this.