Gulp-Rev-replace 没有用 gulp-rev 哈希替换我的文件路径

Question

类似于这里的这个问题：How do I replace the filenames listed in index.html with the output of gulp-rev?

我正在使用 gulp-useref 来合并我的构建块中列出的文件。我想使用 gulp-rev 将哈希添加到串联文件的末尾，并使用新文件名更新我的标记。

根据 gulp-rev-replace 文档，我几乎完全使用它并稍作调整：

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso');
var RevAll = require('gulp-rev-all');


gulp.task("index", function () {
    var jsFilter = filter("js/**/*.js");
    var cssFilter = filter("css/**/*.css");
    var revAll = new RevAll();
    var userefAssets = useref.assets();

    return gulp.src("Views/**/*.cshtml")
      .pipe(userefAssets)      // Concatenate with gulp-useref 
      .pipe(jsFilter)
      .pipe(uglify())             // Minify any javascript sources 
      .pipe(jsFilter.restore())
      .pipe(cssFilter)
      .pipe(csso())               // Minify any CSS sources 
      .pipe(cssFilter.restore())
      .pipe(rev())                // Rename the concatenated files 
      .pipe(userefAssets.restore())
      .pipe(useref())
      .pipe(revReplace())         // Substitute in new filenames 
      .pipe(gulp.dest('public'));
});

我的 html 看起来是这样的：

<!-- build:css css/combined.css -->
<link href="css/components/style1.css" rel="stylesheet">
<link href="css/components/style2.css" rel="stylesheet">
<link href="css/pages/style3.css" rel="stylesheet">
<!-- endbuild -->

<!-- build:js js/lib.js -->
    <script type="text/javascript" src="js/global/js1.js"></script>
    <script type="text/javascript" src="js/vendor/moment.js"></script>
    <script type="text/javascript" src="js/components/component.calendar.js"></script>
    <script type="text/javascript" src="js/pages/jaunt-hotels/matrix.js"></script>
<!-- endbuild -->

我得到的输出是：

<link rel="stylesheet" href="css/combined.css">
<script src="js/lib.js">
the </script>

但我要找的是这样的东西：

<link rel="stylesheet" href="css/combined-ABC234.css">
<script src="js/lib-TYU765.js"></script>

目录结构：

root
 |-css
    |-style1.css
    |-style2.css
    |-style3.css
 |-js
    |-*js files here
 |-views
    |-*Many folders with .cshtml files
 |-gulp
    |-tasks
        |-bundle-assets.js  <-  task that contains code above

非常感谢任何帮助！

Answer 1

感谢您更新您的问题！我昨天尝试了您的 Gulp-Setup 并发现，如果您的资产路径不正确，useref 和 rev 插件将无法工作。在您的示例中，*.cshtml 文件都在文件夹 views 中，但指向上一层的资源。从 views 中的文件（如 views/index.cshtml，无法解析路径 css/components/style1.css，因为它实际上应该是 ../css/components/style1.css。因此 useref 得到一个空结果集, 不创建任何文件，并且 rev 无法更新，因为它没有参考点。

正确设置 cshtml 中的路径，使它们与实际资源相关，然后才能正常工作。我希望您可以，因为该设置看起来有点 Dotnetty，而且我不确定您是否可以自由地进行更改；-)

Answer 2

您需要将选项传递给 revReplace()，例如：

.pipe(revReplace({replaceInExtensions: ['.cshtml']}));

默认情况下，gulp-rev-replace 将仅对 ['.js', '.css', '.html', '.hbs'] 执行更改。

有关 https://www.npmjs.com/package/gulp-rev-replace#options-replaceinextensions 的更多信息。

我在与 .ejs 合作时遇到了类似的问题。希望这有帮助..

Gulp-Rev-replace 没有用 gulp-rev 哈希替换我的文件路径

Gulp-Rev-replace not replacing my the file path with the gulp-rev hash

gulp