使用 gruntjs 的自定义脚本和 css 版本控制最佳实践和自动化

Question

我决定开始对我在 WP 主题中使用的自定义 css 和 js 文件进行版本控制，这样当我更新网站时，不需要重新加载页面来向用户显示更改（早就应该了，我知道）。

仅在调用结束时添加版本号作为查询字符串并保持真实文件名静态是否是一种好做法（如 "script.js?v=xyz" 中所示）？当版本号不变时，这将如何影响浏览器缓存？是否会正常缓存，只有在更改版本号时才会获取新版本？

如果以上是要走的路，我想用 G运行t 自动执行此操作，所以当我运行我的 "build" 命令 PHP 文件时在 WP 中排队的文件被修改为包含随机散列 + 日期作为 wp_enqueue_script 命令中的版本参数。我假设当我运行我的开发命令与 livereload 和所有东西时，具有所述版本的脚本不会影响 livereload 所以我不需要删除版本控制，对吗？你会怎么做，你会使用什么 npm 模块，我需要添加到我的 Gruntfile.js?

的命令是什么

作为旁注，我知道 wordpress 默认添加到所有脚本的版本号和 css 被认为是安全风险，因为它暴露了您正在滚动的 WP 版本，我一直在删除它通过 functions.php，但是，我想启用它，但它不使用 WP 版本，而是使用每次 WP 更新时随机更改的内容。知道如何实现这一点吗？我很惊讶我找不到执行此操作的插件。

非常感谢社区！

Answer 1

我确实这样做了，以此向浏览器表明他们应该下载更新版本的样式表。这不是特别优雅，但我所做的一件事是将缓存破坏参数（在您的示例中为 xyz）声明为 PHP 常量：

// inc/constants.php
define('CACHEPARAMETER', '20161027');

我的 grunt 构建任务使用 grunt-text-replace:

修改了它

replace: {
        cacheparam: {
            src: ['inc/constants.php'],
            overwrite: true,                 // overwrite matched source files
            replacements: [{
                from: /'CACHEPARAMETER', '[0-9]{8}'/g,
                to: "'CACHEPARAMETER', '<%= grunt.template.today('yyyymmdd') %>'"
            }]
        }
    }

我在 functions.php 中排队，我喜欢这样：

include "inc/constants.php";
wp_enqueue_style( 'my-style', get_stylesheet_uri(), array(), CACHEPARAMETER);

希望对您有所帮助。

使用 gruntjs 的自定义脚本和 css 版本控制最佳实践和自动化

Custom script and css versioning best practices and automation with gruntjs

javascript

css

versioning

wordpress

gruntjs