如何获取 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 gulp-file package 创建一个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));
}

构建完成后调用此 function，如下所示：

// 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 文件。