Match CSS files with cache bust number in the filename

[lukeb]

It would be highly helpful if Takana would still match files that have the cache bust number in the filename, like mystyles.12345.css, where the actual file is mystyles.css.

This follows the cache busting strategy in the .htaccess file for HTML5 Boilerplate.

[barnaby]

Hey Luke!

I've actually never seen URLs like yours for cache busting before. So takana will work with cache buster URLs like style.css?123456 but not ones like mystyles.12345.css.

The part of the code that matches <link> tags in the browser to files on disk is pretty specific. So, I'll have to have a look into how widespread your style is before supporting it. In the mean time, it should work if you use request parameters.

[lukeb]

Hey Barnaby!

Thanks for the quick reply. We are very anxious to get Takana working within our environment. Here's some more details.

See HTML 5 Boilerplate on lines L760-L774 https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess#L760-L774

Using querystrings for cache busting is problematic with some CDNs and proxies, as querystrings are typically used for dynamic value passing, not static content. This is why the numeric value in the filename is a better strategy. Read more about it in this article http://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/

What needs to be done to get Takana to match these files as with the source in Sublime Text?

[barnaby]

Hey Luke,

So to get this working, you'll need to adjust the FileMatcher class (https://github.com/mechio/takana/blob/master/lib/support/file_matcher.coffee) to match your case. It is responsible for matching the value of the href attribute from <link> tags to files on disk.

If you're looking to do this yourself, I'd suggest checking the tests as well: https://github.com/mechio/takana/blob/master/test/support/file_matcher.coffee#L17

Cheers

[lukeb]

Unfortunately, I am not familiar with CoffeeScript. :-(

[barnaby]

Hey Luke,

I've tried reproducing your match case, but takana is able to match the simplest case:

      href       = 'http://localhost:8000/css/app.12.354.css'
      candidates = [ 
        '/Users/barnaby/Dropbox/Projects/lib/foundation-libsass-template/scss/app.scss'         
      ]
      match = FileMatcher.pickBestFileForHref href, candidates
      match.should.equal(candidates[0])

The above passes, but of course might not when there are other candidates.

I've pushed this test case to bm/match-cache-buster-urls: https://github.com/mechio/takana/blob/bm/match-cache-buster-urls/test/support/file_matcher.coffee#L19

If you can write a test that breaks (by adding extra candidates), I can fix it. You should be able to see your list of candidates by running takana with the --verbose flag.

And btw, run the tests like this:

$ npm install
$ npm test