ember-cli / broccoli-asset-rev Goto Github PK

Hi,
I checked out the code and I've found that the parameter ignore is not even used?

Am I correct?

This happens only when generateRailsManifest is set to true

Brocfile.js

if (env === 'production') {
  allAssets = new AssetRev(allAssets, {
    extension: ['js', 'css', 'png', 'jpg', 'gif', 'csv', 'map'],
    replaceExtension: ['js', 'css'],
    generateRailsManifest: true,
    generateAssetMap: true,
    prepend: 'https://foobarbaz.cloudfront.net/'
  });
}

module.exports = allAssets

hamann@iMac ~/workspace/boldpoker/boldpoker.net (broccoli⚡ )» node -v
v4.1.1
hamann@iMac ~/workspace/boldpoker/boldpoker.net (broccoli⚡ )» npm -v
3.3.3
hamann@iMac ~/workspace/boldpoker/boldpoker.net (broccoli⚡ )» rm -fr priv/static && BROCCOLI_ENV=production node_modules/broccoli-cli/bin/broccoli build priv/static
TypeError: Cannot read property '1' of null
  at Fingerprint.writeRailsManifest (/Users/hamann/workspace/boldpoker/boldpoker.net/node_modules/broccoli-asset-rev/lib/fingerprint.js:148:55)
  at /Users/hamann/workspace/boldpoker/boldpoker.net/node_modules/broccoli-asset-rev/lib/fingerprint.js:180:12
  at lib$rsvp$$internal$$tryCatch (/Users/hamann/workspace/boldpoker/boldpoker.net/node_modules/rsvp/dist/rsvp.js:493:16)
  at lib$rsvp$$internal$$invokeCallback (/Users/hamann/workspace/boldpoker/boldpoker.net/node_modules/rsvp/dist/rsvp.js:505:17)
  at lib$rsvp$$internal$$publish (/Users/hamann/workspace/boldpoker/boldpoker.net/node_modules/rsvp/dist/rsvp.js:476:11)
  at lib$rsvp$asap$$flush (/Users/hamann/workspace/boldpoker/boldpoker.net/node_modules/rsvp/dist/rsvp.js:1198:9)
  at doNTCallback0 (node.js:407:9)
  at process._tickCallback (node.js:336:13)


Build failed

Hi. I am updating from node 0.12 to node 4.5.0 and it seems that the hash for the exact same image files has changed. Anyway I can keep the old hash in place? Is this because of the new version of node? Thank you so much.

I'm using broccoli-asset-rev to create a build be placed in versioned folder (for use with ember-cli-deploy) and which will be deployed on multiple servers, so I'd like to be able to use the prepend functionality for adding the hostname, but not add hashes to the end of files. If customHash returns empty string or null, I still get a hyphen appended, or -null respectively. It would be helpful if the hyphen was only added if customHash returned a non-empty string.

Hi, I'm having some trouble with broccoli-asset-rev in ember-cli.

My use-case is loading a logo from the database like so:

<img {{bind-attr src=logo}}/>

The issue is the fingerprint for that image is not appended at runtime and so in production, none of these assets work. It's looking for /assets/images/bar023.jpg but the actual file is now /assets/images/bar023-ad232dd232d23423.jpg

Of course I can disable fingerprinting, and that's what I've done in the meantime but I really would like to be able to use it, just somehow append the fingerprint in the template or maybe as a property on the controller?

Thanks,
David

I need to serve fontawesome from my CDN, but broccoli-asset-rev ignores it in my CSS.
I tried referencing the font with different urls /fonts, fonts/, ../fonts/ but it doesn't work.

I saw that there was a closed issue #42 with the same problems, but for me it doesn't work.

// ember-cli-build.js
fingerprint: {
      enabled: isProductionLikeBuild,
      prepend: 'http://name.s3.amazonaws.com/',
      extensions: ['js', 'css', 'png', 'jpg', 'gif', 'svg', 'eot', 'ttf', 'woff2', 'woff']
}

// app.scss
@font-face {
    font-family: FontAwesome;
    src: url(/fonts/fontawesome-webfont.eot?v=4.4.0);
    src: url(/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0) format("embedded-opentype"),url(/fonts/fontawesome-webfont.woff2?v=4.4.0) format("woff2"),url(/fonts/fontawesome-webfont.woff?v=4.4.0) format("woff"),url(/fonts/fontawesome-webfont.ttf?v=4.4.0) format("truetype"),url(/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular) format("svg");
    font-weight: 400;
    font-style: normal
}

I can't get the prepend options to work with urls inside @font-face.

Example in ember-cli:

// In app.scss (I'm using sass)
@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('/fonts/OpenSans.eot');
  src: url('/fonts/OpenSans.eot?#iefix') format('embedded-opentype'),
       local('Open Sans'),
       local('OpenSans'),
       url('/fonts/OpenSans.woff') format('woff'),
       url('/fonts/OpenSans.ttf') format('truetype'),
       url('/fonts/OpenSans.svg#OpenSans') format('svg');
}

// Brocfile
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  fingerprint: {
    prepend: 'https://s3-eu-west-1.amazonaws.com/my-bucket/'
  }
});

module.exports = app.toTree();

The generated output is exactly the same as in the .scss file.

(note: closed ember-cli/broccoli-asset-rewrite#43 in favor of this issue)

Updated to latest and assets are now getting "assets" three times when using customHash and prepend.

in:
<img src="assets/icons/stripe.svg">
out:
<img src="http://localhost:4200/assets/assets/assets/icons/stripe.svg">

  var fingerprintOptions = {
    enabled: true,
    extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map', 'svg'],
    generateAssetMap: true,
    prepend: 'http://localhost:4200/',
    customHash: null,
    generateAssetMap: false
  };

Looks specific to customHash again (removing that fixes again) and may be related to #87

We discovered an issue where strings matching app.js within js content would be fingerprinted, even though they weren't referring to the actual app.js generated by ember cli. Case in point:

Our code makes a request to look for a public file on GitHub. In one of our js files is a string containing a URL like this:

https://api.github.com/repos/{{repo stuff etc}}/contents/app.json?ref=master

After the broccoli build the string is transformed into this:

https://api.github.com/repos/{{repo stuff etc}}/contents/app-{{big-ol-fingerprint}}.json?ref=master

It appears as though it is finding it because it matches app.js, even though that is a subset of the actual string.

The Broccoli walkthrough puts assets in app/, but broccoli-asset-rev assumes that many things will be in assets/, as well as having defaults (for manifest/assetMap files) there. The following seem to be affected:

• filter controlling which files in the asset map are written to the Rails/Sprockets-compatible manifest
• location of existing Rails manifest

The second I'm (a) not hugely fussed about, and (b) don't know how to trigger given Broccoli doesn't want to overwrite build trees. But the first means that something like the following (which may not be the "right" way of doing things, but doesn't give errors) misses app.css and app.js from the Rails manifest:

/* Brocfile.js */

// Import some Broccoli plugins
var compileSass = require('broccoli-sass');
var filterCoffeeScript = require('broccoli-coffee');
var mergeTrees = require('broccoli-merge-trees');
var rev = require('broccoli-asset-rev');

// Specify the Sass and Coffeescript directories
var sassDir = 'app/scss';
var coffeeDir = 'app/coffeescript';

// Tell Broccoli how we want the assets to be compiled
var styles = compileSass([sassDir], 'app.scss', 'app.css');
var scripts = filterCoffeeScript(coffeeDir);
// Merge the compiled styles and scripts into one output directory.
var tree = mergeTrees([styles, scripts]);

var hashed = new rev(
    tree,
    {
        generateAssetMap: true,
        generateRailsManifest: true,
        railsManifestPath: 'manifest.json',
    }
);

module.exports = hashed;

Any workaround for this breaking live reload, or should you always use it with broccoli-env and set it to production only?

See ember-cli/ember-cli#1334

I use inline SVG icons like this in my components/side-bar.hbs:

<svg><use xlink:href="/icons.svg#my-icon-name"></use></svg>

Here is what I get after prepend:

<svg><use xlink:href="https://cloud.com/icons-2d8bb19bb3d1a09b68444738ca864c06.svgmy-icon-name"></use></svg>

Here is what I expect to have:

<svg><use xlink:href="https://cloud.com/icons-2d8bb19bb3d1a09b68444738ca864c06.svg#my-icon-name"></use></svg>

Basically, prepend removes the # from the icon reference icons-2d8bb19bb3d1a09b68444738ca864c06.svg#my-icon-name, after that the reference will look like this: icons-2d8bb19bb3d1a09b68444738ca864c06.svgmy-icon-name.

I have this problem only when I use prepend. Why prepend removes the # from the original URL?Please advise how we can solve this problem. It actually can be related to this one #42

Just in case, here is how the icons.svg looks inside:

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="my-icon-name" viewBox="0 0 512 512">
    <path d="m448 53c0-1 ... 0z"/>
  </symbol>
</svg>

I've added php to the replaceExtensions, but when I do a production build, the filenames aren't being replaced with the checksums.

module.exports = function(defaults) {
  var env = EmberApp.env();
  var isProduction = env === 'production';

  var app = new EmberApp(defaults, {
    fingerprint : {
        replaceExtensions : [ 'html', 'php', 'css', 'js' ]
    },
    outputPaths: {
      app: {
        html: isProduction ? 'default.php' : 'index.html',
        css: {
          'app': '/media/application-name.css'
        },
        js: '/media/application-name.js'
      },
      vendor: {
        css: '/media/com_stonewall/vendor.css',
        js: '/media/com_stonewall/vendor.js'
      }
    }
}

Am I missing something?

EDIT: This actually looks like a problem with using different outputPaths, as when I remove them it works properly. Is there a way to include fingerprinting with different paths?

We run a fork of broccoli-asset-rev so that we can avoid fingerprinting the generated manifest.json file. I was going to open a PR with this change but from reading the repo history noticed this is how it originally worked and that broccoli-asset-rev was later updated to support what Heroku expects.

https://devcenter.heroku.com/articles/rails-asset-pipeline#compiling-assets-locally seems to suggest that both manifest.json and manifest-<hash>.json should be supported but I assume this is not the case based on the original commit. We don't deploy to Heroku so I can't verify without some testing.

Our use case is a little different. We generate the manifest file so that other applications in our ecosystem can parse it and generate fingerprinted links to assets in the ember app. Having a fixed filename for the manifest makes sense for this case. Additionally, the manifest is never served publicly or cached so having it fingerprinted is of no value from that perspective.

If this seems like a reasonable use case to support, could I open a PR to support conditionally enabling/disabling fingerprinting the manifest file?

If I try to use variables in url, like url(/assets/images/foo.png?v=32432423) broccoli-asset-rev ignore the URL.

This is a super handy library, many are using it. (Everyone with ember-cli)

It is possible for you to add some tests, at-least some smoke screen tests so future commiters have a harness to add more tests?

I'm trying to use this plugin with CSS source maps, but I can't get it to work in any fashion because this plugin doesn't understand the double extension. With this config:

tree = assetRev(tree, {
  extensions: ['js', 'css', 'png', 'jpg', 'gif', 'map'],
  exclude: ['fonts/169929'],
  replaceExtensions: ['html', 'js', 'css'],
});

I get this css file:

/*# sourceMappingURL=main-aafff1edf19e012de9347224d8cd4856.css-e997028ad01268b4cda33c1c4ce89b36.map */

but the source-map is renamed to main.css-e997028ad01268b4cda33c1c4ce89b36.map

Other combinations have similar results - even ignoring css.map doesn't help.

I wanted to set the enabled flag to true when I am on staging as well and had to do it this way:

var env = process.env.EMBER_ENV

var app = new EmberApp({
  fingerprint: {
    enabled: env === 'staging' || env === 'production'
  }
});

Is this the way to do it or am I missing something? I mean I am not sure if I should use the env variable explicitly like this (instead of using it through app.env).

See ember-cli/broccoli-asset-rewrite#36

Perhaps you could revlock the broccoli-asset-rewrite dependency to v1.0.11?

https://github.com/rickharrison/broccoli-asset-rev/blob/master/lib/fingerprint.js#L81
is from: https://github.com/rickharrison/broccoli-asset-rev/blob/master/lib/fingerprint.js#L35
which is: https://github.com/rickharrison/broccoli-asset-rev/blob/master/lib/fingerprint.js#L181

but md5hash takes only 1 arg, but https://github.com/rickharrison/broccoli-asset-rev/blob/master/lib/fingerprint.js#L81 passes two, the second arg is lost.

we likely want:

var hash = this.hashFn(file + '\x00' + tmpPath);

or to remove the second arg, or leave a comment explaining this was the intent (if the default functionality is to ignore the path, but the custom hashFn could use it)

Hi there,

we are working on a project where we host our Ember app on a CDN with loads of images which are rarely modified, thus we want them not to be fingerprinted, but prepended. On the other hand, the code is pretty much alive with loads of fixes, new features, etc, thus we want them to be fingerprinted with each new release.
Am I seeing it right that currently there is no way to have this dual functionality?

Not sure if this is an issue with asset-rev or asset-rewrite, but posting here as well.

We're using a Rails-backend index loaded from redis as shown here in the ember-cli-deploy lightning method. https://github.com/ghedamat/ember-deploy-demo/blob/master/edd-cli/ember-cli-build.js#L15

Since upgrading to latest, all the asset urls are double prepended, we're ending up with

GET http://localhost:4200/http://localhost:4200/assets/vendor.css

https://github.com/rickharrison/broccoli-asset-rev/blob/master/package.json#L35

The hash of files are not update between rebuilds when running the Ember CLI server in production mode.

Background: I'm caching the asset with a service worker. Ember CLI SRI does update the integrity hash between rebuilds, this causes the changed asset to not load.

To reproduce:

ember new test-app
cd test-app
ember s --prod

Now open localhost:4200 and note down the hash of test-app.js.

ember g component foo-bar

App reloads, note that the hash of test-app.js is still the same.

Now kill the test server and serve again with ember s --prod. Now the hash of test-app.js did change.

I'm working with ember-cli and I just copied the two lines into ember-cli-build.js file as below
var app = new EmberApp(defaults, {
fingerprint:{
enabled:true
}
});

Then I'm getting the following error: define is not defined in my application.js file and if I remove the above code, I'm able to run my project successfully. But, I want to append the hash code to all of my assets.

The above code does hashing and appends to all of my files vendor.css,vendor.js, project-name.css,project-name.js in the dist folder but I cannot run the project because of the error. I've researched a lot about this, but nobody is facing this problem.

Using Ember 2.8 and broccoli-asset-rev 2.5.0. I have added a prepend when in production to point to my AWS Cloudfront distribution. Everything works fine - except that one image (and no others) gets its fingerprinted URL generated incorrectly.

Here is the html code for that image:
<img src="/assets/images/agreeing.png">

And here is what was generated:
<img src="/https://testlawfirm.settify.com.au/assets/images/agreeing-b43abdb947643080f692a1dfdebc4394.png">

(Notice the unwanted "/" at the start of the URL)

Every other image works just fine, eg:
<img src="/assets/images/telephone.png">
becomes
<img src="https://testlawfirm.settify.com.au/assets/images/telephone-affbcf79f7bf3f4765496d2fcd4ae084.png">

the assetMap.json file gave me no clues:
"assets/images/agreeing.png": "assets/images/agreeing-b43abdb947643080f692a1dfdebc4394.png", "assets/images/telephone.png": "assets/images/telephone-affbcf79f7bf3f4765496d2fcd4ae084.png",

My workaround was to remove the initial / from the one offending img's src, like so:
<img src="assets/images/agreeing.png">

But I doubt this is expected behaviour, especially as every other image in my app has a src beginning with /assets/images/

For what it's worth, ember-cli-build.js contains (relevantly) the following parameters:
params.fingerprint = { enabled: true, prepend: cdnURL + "/", generateAssetMap: true }
cdnURL in this case was https://testlawfirm.settify.com.au

Unfortunately, I have no suggestions as to how this can be reproduced, since this only happens on one image and I can't see a reason why.

I have this configuration for fingerprint rewrite:

var app = new EmberApp(
{
  fingerprint:
  {
    extensions: [ 'js', 'css', 'png', 'jpg', 'gif', 'eot', 'svg', 'ttf', 'woff' ]
  },
  minifyCSS: {
    enabled: false
  }
} );

SVG file names are rewritten with hash. But inside css file, url for SVG webfont is not rewrited when it is generated by https://github.com/sapegin/grunt-webfont by this way:

Original CSS:

@font-face {
  font-family: "custom-font-icons";
  src: url("../icons/custom-font-icons.eot");
  src: url("../icons/custom-font-icons.eot?#iefix") format("embedded-opentype"), url("../icons/custom-font-icons.svg?#custom-font-icons") format("svg"), url("../icons/custom-font-icons.woff") format("woff"), url("../icons/custom-font-icons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

Modified CSS:

@font-face{
  font-family:custom-font-icons;
  src:url(../icons/custom-font-icons-e7697bfc010f44efd8fc4bc56a5013a6.eot);
  src:url(../icons/custom-font-icons-e7697bfc010f44efd8fc4bc56a5013a6.eot?#iefix) format("embedded-opentype"),url(../icons/custom-font-icons.svg?#custom-font-icons) format("svg"),url(../icons/custom-font-icons-e4679169923a82666ab59d5ead50e370.woff) format("woff"),url(../icons/custom-font-icons-7ddb930e5b0a2155f6f38f92e16e7079.ttf) format("truetype");
  font-weight:400;
  font-style:normal
}

URL for SVG file is not rewritten with hash. Problem seems to be in this syntax:

url(../icons/custom-font-icons.svg?#custom-font-icons) format("svg")

But .eot files has the same sintax and they are rewritten.

When HTML is minified using broccoli-htmlmin before fingerprinting, it no longer updates the asset paths.

This is because minifying removes the quotes, so

<script src="/assets/app.js"></script>

becomes:

<script src=/assets/app.js></script>

which doesn't match the regex and so is not updated.

Hi,
In my index.hbs i did some changes and build again, but all the checksums stay the same in the dist/index.html
This blocks me because i want to use ember-cli-deploy, but the dist/index.html file did not change.
Ember-cli-deploy make a checksum of the dist/index.html to generate a new deploy.
So I am forced to make a change in a js file to have a different checksum in the dist/index.html.

Is it normal that hbs files are ignored for checksums?
Thanks for writing this addon and your help.

Hello, my use case is the following: using web workers with Ember:

this.worker=new Worker("assets/workers/worker_ls_serializer.js")

For the files in my workers folder that I call with importScripts, I have to disable prepending the CDN because of CORS issues for worker scripts (has to be the same domain), so I'm using exclude: ['worker'] though we need to still keep the fingerprinting for normal version control.

for reference: ember-cli/ember-cli#1011 http://stackoverflow.com/questions/24175120/ember-cli-project-and-web-workers/36529757#36529757
Thanks,

L

This work will unlock broccoli-asset-rev usage with lazy-loading engines.

https://github.com/trentmwillis/ember-asset-loader/pull/33

[email protected] wrongly fingerprints protocol relative URLs:

input:

<img src="//cdn.example.com/foo.png" />

output:

<img src="//cdn.example.com/foo-ff90e8722fb1fb8000e1b6533589ce90.png" />

expected:

<img src="//cdn.example.com/foo.png" />

I also tried to exclude the protocol relative urls using the following config, but it doesn't work, the urls are still fingerprinted:

// ember-cli-build.js
var app = new EmberApp({
  fingerprint: {
    exclude: ['//**']
  }
});

Hi noticed there's a missing "generateAssetMap" option in the documentation (found it by reading the source). And it was very useful to me so I thought I should help and contribute to the repository by submitting a PR (#45) with the updated documentation.

If I did something wrong, please do tell me.

It would be awesome if you could add the missing git tags corresponding with the releases to this repo. That would make it much easier to see which commits are included in which releases. Thanks :)

I was trying to include md5 checksums for fonts files. It works except the checksum of woff is being used for woff2 (which is wrong).

var app = new EmberApp({
  fingerprint: {
    enabled: true,
    extensions: ['js', 'css', 'png', 'jpg', 'gif', 'ico', 'eot', 'svg', 'ttf', 'woff2', 'woff']
  }
});

Reference: ember-cli/ember-cli#2594 (comment)

own outliers

• tests 199, I suspect we do not want to include tests in published NPM releases.

deps:

• broccoli-asset-rewrite 110
• broccoli-filter 470
• json-stable-stringify 30
• matcher-collection 35
• rsvp 39

The documentation for customHash reads

customHash - Default: none - If set, overrides the md5 checksum calculation with the result of calling customHash(buffer). If it is not a function, customHash is used as the hash value. If it is set to null, fingerprinting is skipped and only prepending occurs.

The code actually calls it two different ways:

1. in getDestFilePath, this.hashFn(file, tmpPath), where file is the contents of the file as a string
2. in writeRailsManifest, this.hashFn(contents)

I'm trying to use broccoli-asset-rev to build a CSS library and I'd like to emit

1. my-library/index.css to my-library/index-1.2.3.css based on process.env.TAG
2. every other asset with an md5 hash

Additionally, because the md5 hash function is a closure-local, I can't get access to it. I could just copy the implementation, but I'd love if it made available, say as a third argument.

I would write something like

tree = assetRev(tree, {
  customHash: function(contents, inputPath, defaultHashFn) {
    if (process.env.TAG && path === 'my-library/index.css') {
      return process.env.TAG;
    }
    return defaultHashFn(content, inputPath);
  }
});

Just ran into a tough-to-debug issue with broccoli-asset-rev that was causing issues in FastBoot. FastBoot relies on the asset map to generate its own manifest file.

However, in one of the apps I'm working on, they had added json to the replaceExtensions array (which I'd guess may be fairly common). Unfortunately, the assetMap.json file is also rewritten.

In effect, that means that instead of:

{ assets: 
   { 'assets/module-whitelist.css': 'assets/module-whitelist-d41d8cd98f00b204e9800998ecf8427e.css',
     'assets/module-whitelist.js': 'assets/module-whitelist-b2b974ffee53efecae932353853cf83a.js',
     'assets/vendor.css': 'assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css',
     'assets/vendor.js': 'assets/vendor-eb3d3e03fa845747687b14602e40e459.js' },
  prepend: 'http://cdn.example.com/' }

You instead get the prepended URL added to each path:

{ assets: 
   { 'http://cdn.example.com/assets/module-whitelist.css': 'assets/module-whitelist-d41d8cd98f00b204e9800998ecf8427e.css',
     'http://cdn.example.com/assets/module-whitelist.js': 'assets/module-whitelist-b2b974ffee53efecae932353853cf83a.js',
     'http://cdn.example.com/assets/vendor.css': 'assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css',
     'http://cdn.example.com/assets/vendor.js': 'assets/vendor-eb3d3e03fa845747687b14602e40e459.js' },
  prepend: 'http://cdn.example.com/' }

Checksums of files that reference other assets should take into account the names of those nested assets after they've been revisioned.

A simple example of when this surfaces is anytime you have a file such as a CSS file, referencing another file such as a background image, and the background image is changed but not renamed.
In this instance, the CSS file checksum remains the same, even though it correctly points to the new background image checksum.

I don't actively use broccoli so I can't offer much insight beyond this bug report, but I figured it might help given that those of us who actually care about fingerprinting are also the ones affected by such issues :) Hope this helps.

I found a handy use for customHash, which is to force a hard-reset of the hashes. My use case was wanting to invalidate cloud-front caches so that I could get new Origin headers necessary for a domain name change. By defining a customHash function that just added an extra version string to the end of the content and then doing the usual md5 hash, I now have a way to force a hard-reset of all hashes by incrementing this version.

However, it would be nice if the file name was also passed to the customHash function so that one could more intelligently decide how to hash the content. In my use case, this would allow me to only reset the cache for a certain file or subset of files.

Would this be a straightforward fix. Is there appetite for it?

Hi. I'm adding a loading image, to index.html, in an Ember.JS project.
The problem is that, after fingerprinting this:

        <img
             src="images/myimage.png"
             srcset="images/[email protected] 2x, images/myimage.png 1x"
             sizes="200px"
             alt="Loading" />

        <img
             src="//mycdn.cloudfront.net/images/myimage-515d3d97735aae0a950e74c8ad32ddbf.png"
             srcset="//mycdn.cloudfront.net/images/[email protected]"
             sizes="200px"
             alt="Loading" />

The problem is that, it removes the 1x and 2x directives, and this makes the desktop browsers load the 2x image by default. I don't really know why, but I guess is something to do with srcset compatibility.
Any way we can preserve both the 1x and 2x directives?

The latest version of broccoli-asset-rewrite is 1.0.4 and has a fix for ember-cli/broccoli-asset-rewrite#11

could you update this package to tuse the latest version?

Personally, I think it's more useful to fingerprint all files regardless of their extension and only exclude a few. It would be great if that mode was supported by setting extensions: null.

Here's why:

When I deploy my static assets I basically want them cached forever. That's why I configured my CDN (CloudFlare) to instruct the browsers to cache all files from my https://assets.example.com/ domain for 1 year. The problem with this is, that there are some files (like icon fonts) that don't get fingerprinted because of their file extension, but still get these caching rules.

This is problematic when these files are regenerated and change. Because they were not fingerprinted, all browsers retain the old version and don't download the new one.

Of course I could fix this by adding .woff and all other web font output extensions to the extensions array.

However, this is tedious and paves the way for unexpected caching errors. Especially when I introduce additional formats like .svg or .webm, etc.
Whenever I add a new static file format, I'd have to make sure it's on the list.

Therefore my suggestion: Setting extensions: null disables the filtering. This would not break backwards compatibility as far as I can see. I'd make a PR, if you're okay with this. 😃

One step further (but breaking backwards compatibility): fingerprint all files by default, except for some sensible exclusions, like /index.html and /favicon.ico, even though the latter one is debatable. The old behaviour would be opt-in by setting extensions to an array.

Was there a specific reason to not fingerprint all files right away? Performance maybe? If peformance is a problem, we could introduce a new setting maxSize, and files would be filtered based on that.

Can it be done so that

<script src="assets/appname.js">
background: url('/images/foo.png');

will turn into

<script src="https://subdomain.cloudfront.net/assets/342b0f87ea609e6d349c7925d86bd597.js">
background: url('https://subdomain.cloudfront.net/images/735d6c098496507e26bb40ecc8c1394d.png');

or even

<script src="https://subdomain.cloudfront.net/342b0f87ea609e6d349c7925d86bd597.js">
background: url('https://subdomain.cloudfront.net/735d6c098496507e26bb40ecc8c1394d.png');

You've got a great thing going with generating asset maps and both renaming files and relinking assets consistently, but customHash is far too inflexible. It would be better if there was additionally a way we could plug a function that modifies the path, filename, and/or extension.

Repro steps:

npm install --save broccoli
npm install --save broccoli-asset-rev
mkdir app
echo "hello" > app/test.js
echo "there" > app.test.json

Create app/index.html containing

<script src="test.js">
<script src="test.json">

Create Brocfile.js containing:

var AssetRev = require('broccoli-asset-rev');
var assetNode = new AssetRev('app', {});
module.exports = assetNode;

Run broccoli build dist

Now, look in the 'dist' folder. It contains

test-b1946ac92492d2347c6235b4d2611184.js
test.json

so you can see that test.js has been fingerprinted, and test.json has not. This is reasonable, the default file extensions for broccoli-asset-rev contains "js" but not "json".

Now look inside dist/index.html. It contains:

<script src="test-b1946ac92492d2347c6235b4d2611184.js">
<script src="test-b1946ac92492d2347c6235b4d2611184.json">

Notice that it has replaced the reference to test.json with the same fingerprint that it used for test.js, even though a:test.json should have a different fingerprint as it has different contents, and b:the test.json file in the 'dist' folder didn't get renamed, so the reference shouldn't have changed.

If I add 'json' to the list of extensions to process in the options, then it starts to work properly.

Hello, I'm using ember-cli, but running ember build environment=production does not rename certain images in my source file to match the updated fingerprinted name. Here's how to reproduce:

Brocfile.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
    fingerprint: {
        replaceExtensions: ['html', 'css', 'js']
    }
});

The image itself is referenced in my Handlebars template:

/app/templates/standard-shell.hbs

<a class="navbar-brand" href="#"><img class="logo" src="assets/images/logo-white.png" /></a>

After running ember build environment=production, when I look in /dist/assets/images, I see a file logo-white-2f70fda5e0c5b1069f090e573fff37a5.png that is fingerprinted as expected.

But when I load the ember app, it's still referencing assets/images/logo-white.png. Is this plugin not meant to work with Handlebars templates, or did I miss anything in my setup process?

Thanks for writing this and for your input!

Update: I also want to add that a .jpg file on the same page is converting to fingerprinted URL just fine. Even placing the PNG elsewhere in the page doesn't seem to change things.

Update 2: The actual file name I'm using is omedix-engage-logo.png. Even after removing png from the list of extensions, I'm noticing that the tool still converts the file name to OMEDIX-engage-logo.png (note the caps). Seems like a bug.

This issue is related to https://github.com/martndemus/ember-font-awesome/issues/64

It seems the cache busting params (?v=4.7.0) that font-awesome uses avoid the font files from being properly fingerprinted. Since font awesome is distributed that way, we cannot change the params.

(if there was a previous issue on this please link it to me so I can have a look.)

At the moment prepend assumes a string (i.e. https://subdomain.cloudfront.net/). However, it is possible to create CNAME/ALIAS records that point at the CDN url. For example: cdn1.foobar.com, cdn2.foobar.com, cdn3.foobar.com, etc.

This approach is notable for optimizing browser page load performance. Particularly, by leveraging on the max number of default simultaneous persistent connections per server/proxy. More on this here: http://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser

For most Ember-CLI applications, loading the 4 main assets (vendor.css, vendor.js, client.css and client.js) is enough. And in most cases, a single fingerprint URL is sufficient. In other scenarios/apps, there are other assets to consider. Such as fonts, etc.

Perhaps it would be a good option to somehow support multiple URL's?