Question

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

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

根据gulp-rev-replace doc，我几乎完全使用这个小调整：

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合作并遇到类似问题。希望这会有所帮助..

Answer 2

感谢您更新您的问题！昨天我尝试了你的Gulp-Setup并发现，如果资产的路径不正确，useref和rev插件将无法运行。在您的示例中，*.cshtml文件全部位于文件夹views中，但指向位于上一级的资源。来自views内的文件（如views/index.cshtml），无法解析路径css/components/style1.css，因为它实际上应该是../css/components/style1.css。因此useref获取空结果集，不会创建任何文件，rev无法更新，因为它无法引用。

获取cshtml权限中的路径，使其相对于真实的资源，而不是工作。我希望你能，因为那个设置看起来有点像Dotnetty，而且我不确定你是否有自由改变的东西; - ）

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

2 个答案: