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

Question

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

只是在调用结束时添加一个版本号作为查询字符串并保持真实文件名静态是一个好习惯吗(如“script.js?v=xyz”)？当版本号不变时，这将如何影响浏览器缓存？是否会正常缓存，只有在更改版本号时才会获取新版本？

如果以上是要走的路，我想用 Grunt 自动执行此操作，所以当我运行我的“构建”命令时，文件在 WP 中排队的 PHP 文件被修改为包含随机哈希值 + 日期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);

希望这对您有所帮助。