php - 如何获取 gulp 构建版本以使用 PHP 自动刷新 css 缓存

Question

我正在使用 gulp 构建任务将多个 CSS 文件合并并缩小到一个名为 app.min.css 的文件中。

接下来，在 Wordpress 中，我使用这段代码来包含 css 文件:

 $version = '2.6';
 wp_enqueue_style( 'app.min', get_template_directory_uri() . '/assets/css/dist/app.min.css', array(), $version );

但不幸的是，每次我想发布新构建的 app.min.css 时，我都需要手动更新版本号。这样 Wordpress 就知道它已经为客户端浏览器提供了一个新的 CSS 文件。

是否可以检测到新的 gulp 构建版本。所以我不必手动告诉 Wordpress 它需要刷新当前样式表？

// conceptual code
$version = getLatestGulpBuildVersion();

Answer 1

我今天在工作中确实找到了解决这个问题的方法。这可能不是最好的方法，但它确实有效。

在 gulp build 任务结束时，您可以使用 gulp-file 包创建一个 version.txt 文件:

function deploy_version(dist_path) {
    let uniqueVersion = Date.now() + ( (Math.random() * 100000).toFixed());

    return gulp.src('src/**')
        .pipe(file('version.txt', uniqueVersion.toString()))
        .pipe(gulp.dest(theme_path + dist_path));
}

构建完成后调用此函数，如下所示:

// build app.min.css
gulp.task('build-custom-css', function () {

   // ...
   // building stuff...

   deploy_version('assets/css/dist/');
 });

这样在JS和CSS生产dist文件夹的dist文件夹下就有了version.txt文件。例如，内容如 157295773737144587 之类的唯一编号。

现在在 functions.php 中，我们可以简单地将版本加载到 $version 变量中，如下所示:

$version = file_get_contents( get_template_directory_uri() . '/assets/css/dist/version.txt' );
wp_enqueue_style( 'app.min', get_template_directory_uri() . '/assets/css/dist/app.min.css', array(), $version );

通过上传 dist 文件夹和新构建的文件，例如 app.min.css 文件。我们还上传了 version.txt 文件，其中包含一个新的唯一版本号。这样浏览器将被强制自动重新加载 css 文件。