jonkemp / gulp-useref

Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
MIT License
705 stars 93 forks source link

Assets with query strings don't get bundled #233

Closed mikevaux closed 7 years ago

mikevaux commented 7 years ago

Firstly, thanks so much for maintaining this really useful repository!

I have noticed that assets with query strings don't get bundled.

Consider:

<!-- build:css(./) dist/css/main.css -->
    <link rel="stylesheet" href="src/css/part-1.css">
    <link rel="stylesheet" href="src/css/part-2.css?some-query-string">
<!-- endbuild -->

Part 1 gets processed, dist/css/main.css gets created, the reference in the dist template file is written correctly, but part-2.css's contents are missing from dist/css/main.css

If it is just one file:

<!-- build:css(./) dist/css/main.css -->
    <link rel="stylesheet" href="src/css/main.css?some-query-string">
<!-- endbuild -->

Then the reference in the dist template is still written correctly, but no dist/css/main.css gets created.

The reason I am looking to use a query string in local development is to append the current timestamp to always cachebust the file whilst keeping the .htaccess expires headers version controlled. (If that's bad practise or there's a better I'm happy to be advised!)

Hopefully I'm not missing anything, but I couldn't see anything when searching for 'query' in the docs and in both open and closed issues.

Shout if you need any more info! :)

jonkemp commented 7 years ago

Would something like this be an option for you?

https://www.npmjs.com/package/gulp-rev/

Static asset revisioning by appending content hash to filenames: unicorn.css => unicorn-d41d8cd98f.css

mikevaux commented 7 years ago

Thanks for the reply!

I'm not sure; we already use something like that as part of the build process (https://www.npmjs.com/package/gulp-cachebust) to simultaneously revision the file names, and the references to them in the templates. (This happens directly after useref() is called.) So, e.g.

/src/css/main.css becomes /dist/css/main.1a2b3c4d.css <link rel="stylesheet" href="src/css/main.css"> becomes <link rel="stylesheet" href="src/css/main.1a2b3c4d.css">

I'm just trying to get my head round how this sort of system (or at least the gulp-rev alternative) could work well for cache busting in local development. We use twig to render the templates, so my best guess from a fairly quick look through the docs would be that we would need to write some sort of micro plugin for the CMS to get the rev'd references from the manifest.json file. We'd then need to swap out gulp-useref altogether for e.g. gulp-concat, which presumably gulp-rev is aware of (in terms of bundling & file names changing). Is that roughly the sort of thing you were thinking?

jonkemp commented 7 years ago

I would look for some alternative to using a query string during local development. That seems unnecessary to me. If it's because of the .htaccess file, that should be on your production server only I would think.

mikevaux commented 7 years ago

Ok, sure, makes sense. Agreed that the query string seems unnecessary, I guess it's just a way which I've been using which works ;)

Thanks so much for the responses!