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

【问题标题】：Add hash to a filename, then replace references to it using Gulp将哈希添加到文件名，然后使用 Gulp 替换对它的引用
【发布时间】：2016-04-21 14:08:07
【问题描述】：

我有文件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');

【问题讨论】：

我会看看roots/sage starter 主题是如何加速资产的。他们使用 gulp-rev 写入清单，然后在 wordpress 中读取 json。这样做的好处是将与构建相关的所有内容都保存在 dist/build 文件夹中。
谢谢，我见过哈希插件写入清单，但我认为写入 json 文件的中间阶段有点笨拙。

标签： html css gulp

【解决方案1】：

您可以在流中添加 Gulp rename 管道作为 css 名称，然后使用 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('./')
 });

【讨论】：

是的，我已经看到了，但是在我看到的所有散列插件中，没有一个可以让您访问散列本身。其中一两个人将哈希值写入清单文件。我本可以使用节点的加密自己创建一些东西，但我很惊讶没有开箱即用的东西。不过我确实找到了一些东西，所以我会自己发布一个答案。

【解决方案2】：

我发现 gulp-cachebust 可以满足我的要求：它用哈希重命名文件，然后用哈希文件名替换对这些文件的引用。

更新

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

【讨论】：

Jason 你可能想试试gulp-rev。它功能丰富，是目前首选的工具。您可以使用它来破坏缓存并修改您的开发和发布版本。反正我就是这么用的。
谢谢@Wilmer 我确实看过 gulp-rev，但它会写入清单，所以我必须进去并从那里检索原始名称和散列名称，然后替换那些引用在wp_enqueue_script()内。
哦，天哪，我忘了你在这样做。我从来没有手动添加我的参考资料。使用gulp-inject。首先运行您的注入任务，然后运行您的 rev 任务。这将允许您随意添加脚本文件，而不必记住维护您的引用。我有数百个，所以想象一下，如果我要手动完成那将是一场噩梦