CSS 缓存更新和 CDN

Question

当我开发 Web 应用程序时，我习惯于在 CSS URI 的末尾添加 ?ver=XXX。

我正在更新一个 wordpress 主题，我发现一个过滤器可以从“静态资源”中删除任何 ?ver= ：

add_filter('script_loader_src', 'mb_remove_script_version', 15, 1); add_filter('style_loader_src', 'mb_remove_script_version', 15, 1);

在网上搜索我发现如果不删除那些 ver=，CDN 可能无法工作并且不会缓存 CSS 文件！这对我来说是一个很大的惊喜，因为我到处都在使用它。

当我修改 CSS（通过版本升级）时，我使用此版本强制浏览器更新其缓存。 你如何强制浏览器理解文件必须重新下载而不使用ver=？

-- 谢谢 尼古拉斯。

Answer 1

您可以使用诸如 Grunt（或 gulp）之类的工具来修改您的资产：
https://www.npmjs.com/package/grunt-wp-assets
https://www.npmjs.com/package/gulp-rev

Answer 2

感谢您的回答，这是完整的答案：

在我的主题中，~theme/lib 目录中有这个文件“theme-functions.php”。 这是使用 enqueue_style 函数加载 css 文件的文件：

wp_enqueue_style( '_mbbasetheme-style', get_template_directory_uri() . '/style.min.css' );

按照建议使用 grunt，我能够实现以下步骤：

• 罗盘SASS文件并制作一个独特的css文件==>style.css
• 缩小我独特的 css 文件以使其更轻 ==> style.min.css
• 版本我的 css 文件以创建一个唯一的文件名 ==> style.4c72.min.css

这些步骤使用以下 grunt-plugins ：

• grunt-contrib-compass : 在 Gruntfile.js 中使用这个 grunt 规则

指南针：{ 分布：{ 选项： { 配置：'config.rb' } } },

• grunt-contrib-cssmin : 在 Gruntfile.js 中使用这个 grunt 规则

cssmin：{ 选项： { 保持特别评论：1 }, 缩小：{ 展开：真， cwd: '', src: ['*.css', '!*.min.css'], 目的地：''， 分机：'.min.css' } },

• grunt-wp-assets : 在 Gruntfile.js 中使用这个 grunt 规则

版本： { 资产：{ 选项： { 算法：'sha1'， 长度：4， 格式：假， 重命名：假， 缩小：真， 清单：'manifest.json' }, 文件：{ 'lib/theme-functions.php': ['style.min.css'] } } },

如您所见，最后一个在参数中使用一个文件来更新对 css 文件的引用。在 grunt 执行之后（实际上是一个 grunt-contrib-watch 规则），theme-functions.php 被更新为：

wp_enqueue_style( '_mbbasetheme-style', get_template_directory_uri() . '/style.4c72.min.css' );