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

Question

与此问题类似:How do I replace the filenames listed in index.html with the output of gulp-rev?

我使用 gulp-useref 来组合我的构建 block 中列出的文件。我想使用 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

您需要将一个选项传递给revReplace()，如下所示:

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

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

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

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