Gulp-Rev替换不替换我的文件路径与Gulp-rev哈希

Question

类似于这里的问题：如何将index.html中列出的文件名替换为Gulp-rev的输出？

我使用gulp useref组合我的构建块中列出的文件。我想使用gulp rev在连接文件的末尾添加一个散列，并用新文件名更新我的标记。

根据古普-转速-替换文档，我几乎完全使用了这个小调整：

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

感谢更新您的问题！我昨天尝试了你的大口设置，发现，如果你的资产路径不正确，useref和rev插件就不能工作。在您的示例中，*. cshtml文件都在文件夹view中，但指向位于上面一层的资源。从view内的文件（如view/index.cshtml，路径css/组件/style1.css无法解析，因为它实际上应该是.../css/组件/style1.css.因此useref得到一个空的结果集，不创建任何文件，并且rev无法更新，因为它没有引用点。

获取您的cshtml中的路径，使它们相对于真正的资源，这样就可以正常工作。我希望你可以，因为这个设置看起来有点Dotnetty，我不确定你是否有改变事情的自由；-）

Answer 2

您需要向RevReplace（）传递一个选项，如下所示：

.pipe（revReplace（{replace:['.cshtml']}））

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

更多有关https://www.npmjs.com/package/gulp-rev-replace#options-缓和紧张局势。

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