dependent files rev names and cache

[ezraroi]

Lets say I have 2 html files: a.html b.html

a.html is pointing to b.html in his markup (ng-inlcude for example). Now, i have made changes in file b.html but not in a.html -> a.html will have the same revved file name, but b.html will have a different name -> if a.html that points to the old revved name of b.html is cached in the client he will get a broken link.

How I can solve this issue? Am i doing something wrong?

[eddiemonge]

You should have the names updated as part of your build process, not manually managing things like this.

[ezraroi]

It is done automatically by grunt-usemin. Nothing is done manually. I am using the yeoman Gruntfile.js as my start point. Can you please how you solve this problem?

[eddiemonge]

In that case the file names should be updated whenever you run grunt build and so the references will be updated as well.

[ezraroi]

Yes, everything is working but the scenario that I described is problematic. The file name is updated based on hash function the depends on the content. So in this case if file a was not changed at all, it will have the same name as the file had in the previous build. The problem is that the other file that the first page has link to was changed and he will get a new name. And here start the problem, the new file name of the second file will be updated in the first file but it will still have the same file name as the file from the previous build

[eddiemonge]

Oh ok. Hmm. This is really tricky to solve and I'm not even sure if its a filerev or usemin problem.

[ezraroi]

Yes, but I am sure I am not the only one who encountered this issue. I saw this on production in few of my projects and it took me quit some time to understand what is wrong. The usemin is only updating the the links, it is not in charge of the file names. Maybe adding a random algorithm to the hash function options? With random naming, each build we will have new names for all files, this is will impact caching of course but in the current solution you site can be broken on production. What do you say?

[eddiemonge]

After thinking about this, without doing a ton of crazy voodoo magic and a lot of work, the simplest solution would be to change something in a.html as well. A better solution would be to double rev/update the files. But again, lots more work.

[ezraroi]

Yes, I agree that changing a file is a good solution but this need to be automated. Otherwise there is no chance anyone will remember to do this everytime

[jscti]

I have the same problem, you're not alone ;). I'm using :

• an index.html which loads :
• a revved style.css which have reference to :
• a revved image sprite .png

If I modify an image from the sprite, the new generated sprite get a new revved filename but style.css doesn't update its revved filename.. so the browser cache never gets updated.

I think the problem is that all the rev-logic is performed in one go (filerev->usemin).. i'll try to separate this process :

• filerev->usemin for inner references (filerev / reference sprite in css)
• and after that : filerev->usemin for top files (filerev / reference new css in html)

[jscti]

It works ;)

Grunt taks (after concat/uglify, etc) : [...] 'filerev:assets', // images, fonts, etc 'usemin', 'filerev:source', // top dependencies (js / css) 'usemin', [...]

It feels more like a workaround .. don't know if filerev/usemin should be corrected to handle that automatically ... but hope I helped.

[ezraroi]

@bixibu Can you please write your entire Gruntfile please? I am overcoming this issue currentlt with grunt-angular-templates task, as it is creating the html templates inside the angular template cache

[jscti]

My Gruntfile is made of 1500+ lines :/

So basically,

• filerev config :

filerev: {
    options: {
        encoding: 'utf8',
        algorithm: 'md5',
        length: 8
    },
    // top files
    source: {
        files: [{
            src: [
                '<%= dest.js %>/**/*.js',
                '<%= dest.css %>/**/*.css'
            ]
        }]
    },
    // inner dependencies of top files
    assets: {
        files: [{
            src: [
                '<%= dest.assets %>/**/*.{jpg,jpeg,gif,png,ico}'
            ]
        }]
    }
},

• usemin config :

usemin: {
    html: ['<%= dest.html.all %>'],
    css: ['<%= dest.css %>/**/*.css'],
    js: ['<%= dest.js %>/**/*.js', '<%= dest.html.all %>'],
    options: {
        dirs: ['<%= dest.root %>'],
        assetsDirs: ['<%= dest.root %>'],
        patterns: {
            js: [
                [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files'],
                [/["']([^:"']+\.css)["']/img, 'CSS replacement in js files']
            ]
        }
    }
},

I have no problem with angular templates, but I use html2js to merge all my html tempaltes in a single js file (which get revved without problem)