ember-cli / broccoli-asset-rev Goto Github PK
View Code? Open in Web Editor NEWBroccoli plugin to add fingerprint checksums and CDN URLs to your assets
License: MIT License
Broccoli plugin to add fingerprint checksums and CDN URLs to your assets
License: MIT License
See ember-cli/broccoli-asset-rewrite#36
Perhaps you could revlock the broccoli-asset-rewrite dependency to v1.0.11?
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'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.
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
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
).
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
}
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?
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 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.
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?
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?
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
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.
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.
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?
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)
own outliers
deps:
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.
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/' }
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'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.
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.
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.
[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: ['//**']
}
});
The documentation for customHash
reads
customHash
- Default: none - If set, overrides the md5 checksum calculation with the result of callingcustomHash(buffer)
. If it is not a function,customHash
is used as the hash value. If it is set tonull
, fingerprinting is skipped and only prepending occurs.
The code actually calls it two different ways:
getDestFilePath
, this.hashFn(file, tmpPath)
, where file
is the contents of the file as a stringwriteRailsManifest
, this.hashFn(contents)
I'm trying to use broccoli-asset-rev to build a CSS library and I'd like to emit
my-library/index.css
to my-library/index-1.2.3.css
based on process.env.TAG
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);
}
});
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.
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)
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:
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
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.
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:
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;
This work will unlock broccoli-asset-rev
usage with lazy-loading engines.
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?
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.
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?
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.
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.
(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
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 :)
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.
Any workaround for this breaking live reload, or should you always use it with broccoli-env
and set it to production only?
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
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.
Hi,
I checked out the code and I've found that the parameter ignore is not even used?
Am I correct?
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?
If I try to use variables in url, like url(/assets/images/foo.png?v=32432423)
broccoli-asset-rev ignore the URL.
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.
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.)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.