Fingerprint assets within files

[kflorence]

Assets within fingerprinted files should also be fingerprinted. For example:

css/test.css

.foo {
    background-image: url(../images/bar.gif);
}

Metalsmith(__dirname)
  .use(fingerprint({ pattern: [ 'images/bar.gif', 'css/test.css' ] }))
  .build()

Would result in something like:

css/test-a39b33df8a18b604941ad6924a743062857eac9c.css

.foo {
    background-image: url(../images/bar-aef338664bc5332ffd0be3670c9a30d7e3a1dc65.gif);
}

[christophercliff]

I don't doubt the value of the proposed feature, but I think it would be more appropriate as a separate plugin.

[tylergaw]

This is super old and ya'll prob moved on to other things. Agree on it not belonging in this plugin, but whipped up a way to make this work in a project I'm on.

1. Use ole metalsmith-fingerprint as normal.
2. Use Sass and write a custom function url function that outputs the fingerprint-needed business:

In _utils.scss

// fingerprint-url
// @param {String} filename
//
// For a given filename, return the fingerprinted path name
//
// Example usage in SCSS:
//   background: red fingerprint-url("main-bg.png") no-repeat center;
//
// Example output in CSS:
//   background: red url("/images/main-bg-1234567890.png") no-repeat center;
//
// The .css file generated during the Metalsmith build, is then processed with
// Handlebars. During that, the {{fingerprint.[]}} will be replaced with the
// correct path to the fingerprinted asset.
//
@function fingerprint-url($filename) {
  @return url("/{{fingerprint.[images/#{$filename}]}}");
}

1. Then use metalsmith-inplace to handle templating, and I include .css files to it's pattern:

.use(inplace({
    'engine': 'handlebars',
    'pattern': [
      '**/*.html',
      '**/*.md',
      '**/*.css'
    ],
    'partials': '../partials'
}))

It's important that the inplace is run after your Sass compilation.

cc: @kflorence just in case you run into this again.