用gulp rev哈希替换不替换我的文件路径。

Question

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

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

根据gulp替换文档，im几乎完全是用一些小的调整来使用的：

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

谢谢你的问题更新！我昨天试过了你的套路设置，发现如果你的资产路径不正确，用户界面和rev插件就不能工作。在您的示例中，*.cshtml文件都在文件夹views中，但指向上面一个级别上的重新源。从views中的文件(像views/index.cshtml一样，路径css/components/style1.css不能被解析，因为它实际上应该是../css/components/style1.css )。因此，useref获得一个空的结果集，不创建任何文件，而且rev无法更新，因为它没有引用的意义。

在您的cshtml中找到正确的路径，使它们相对于实际的资源，而不是工作的路径。我希望你可以，因为这个设置看起来有点多特尼蒂，我不确定你是否有自由去改变事物;-)

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一起工作，也遇到了类似的问题。希望这有帮助..。