将哈希添加到文件名，然后使用Gulp替换对它的引用

Question

我有文件base.css，我有一个styles.php文件，代码如下：

wp_enqueue_script('base', get_template_directory_uri() . '/css/base.css');

如何让Gulp用其哈希重命名base.css并替换styles.php中的引用？

所以，我正在寻找要调用的文件，例如base-375dfd5f.css和styles.php阅读

wp_enqueue_script('base', get_template_directory_uri() . '/css/base-375dfd5f.css');

Answer 1

您可以在流中为css名称添加Gulp rename管道，然后使用Gulp inject string进行PHP文件的更新。

这样的事情应该有效：

 var gulp   = require('gulp'),
     rename = require('gulp-rename'),
     inject = require('gulp-inject-string');

 var myHash = someLogicToGetThisValue();

 gulp.task('CSSHash', function () {
        return gulp.src('base.css')
                .pipe(rename('base' + myHash + '.css'))
                .pipe(gulp.dest('./')
 });

 gulp.task('PHPHashInject', function () {
        return gulp.src('file.php')
                .pipe(inject.replace('base.css', 'base' + myHash + '.css'))
                .pipe(gulp.dest('./')
 });

Answer 2

我发现gulp-cachebust可以做我想要的：它用散列重命名文件，然后用散列文件名替换对这些文件的引用。

更新

我最终使用gulp-rev创建清单并更改文件名，并使用gulp-rev-replace来更改对文件的引用。它运作良好。