CSS cache update and CDNs - html

Question

When I develop web applications, I'm used to add a ?ver=XXX at the end of my CSS URIs.
I'm updating a wordpress theme and I found a filter that removes any ?ver= from "static ressources" :
add_filter( 'script_loader_src', 'mb_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'mb_remove_script_version', 15, 1 );
Searching the web I found that without removing thoses ver=, CDN may not work and do not cache the CSS files ! That's a big surprise to me as I used it everywhere.
I use this version to force browsers to update their cache when I modify the CSS (by versionning up).
How do you force browser to understand the file must be downloaded again without using a ver= ?
--
Thank you
Nicolas.

Answer 1

You can use a tool such as Grunt (or gulp) to rev your assets:
https://www.npmjs.com/package/grunt-wp-assets
https://www.npmjs.com/package/gulp-rev

Answer 2

Thank to your answers, here is the full answer :
In my theme there is this file "theme-functions.php" in the ~theme/lib directory.
This is the file that loads the css file using the enqueue_style function :
wp_enqueue_style( '_mbbasetheme-style', get_template_directory_uri() . '/style.min.css' );
Using grunt as suggested, I was able to achieve the following steps :
Compass the SASS file and make a unique css file ==> style.css
Minify my unique css file to make it lighter ==> style.min.css
Version my css file to make a unique file name ==> style.4c72.min.css
These steps use the following grunt-plugins :
grunt-contrib-compass : with this grunt rule in Gruntfile.js
compass: {
dist: {
options: {
config: 'config.rb'
}
}
},
grunt-contrib-cssmin : with this grunt rule in Gruntfile.js
cssmin: {
options: {
keepSpecialComments: 1
},
minify: {
expand: true,
cwd: '',
src: ['*.css', '!*.min.css'],
dest: '',
ext: '.min.css'
}
},
grunt-wp-assets : with this grunt rule in Gruntfile.js
version: {
assets: {
options: {
algorithm: 'sha1',
length: 4,
format: false,
rename: false,
minify: true,
manifest: 'manifest.json'
},
files: {
'lib/theme-functions.php': ['style.min.css']
}
}
},
As you can see, the last one takes a file in argument to update the reference to the css file. After the grunt execution (actually a grunt-contrib-watch rule), the theme-functions.php is updated to :
wp_enqueue_style( '_mbbasetheme-style', get_template_directory_uri() . '/style.4c72.min.css' );