javascript - Gulp 就地替换源 HTML 文件中的版本化 CSS 和 JS 文件

Question

作为构建过程的一部分，我正在使用 gulp 来修改我的 js 和 css。这是我在自动取款机上的做法。

gulp.task("revision", function(){
  return gulp.src(["assets/**/*.css", "assets/**/*.js"])

    .pipe(rev())
    .pipe(gulp.dest('dist/assets/'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist'))
})

上面的代码的作用是创建一个名为 dist\assets 的新文件夹，并将版本(化)文件保存在那里

然后，我尝试在“现有”index.html 文件中使用生成的 app*.js 和 app*.css (在 dist/assets 文件夹中)。我正在使用 gulp-rev-replace 插件。

gulp.task("revreplace", ["revision"], function(){
  var manifest = gulp.src("./" + 'dist' + "/rev-manifest.json");

  return gulp.src('.' + "/index.html")
    .pipe(revReplace({manifest: manifest}))
    .pipe(gulp.dest('dist'));
});

但是上面的代码正在 dist 文件夹中创建一个新文件(index.html)。虽然这可行 - 但如果它使用原始 HTML 文件，我会非常高兴。有什么办法可以实现这一点吗？

示例代码非常适合我。

谢谢

Answer 1

虽然这是一个迟到的答案，但我遇到了完全相同的需求并刚刚弄清楚。

函数replaceContents()中，源码使用

contents = contents.split(unreved).join(reved)

用版本化的文件名替换原始文件名。显然，我们可以使用正则表达式来用指纹替换任何文件名。

和行

var unreved = options.modifyUnreved ? options.modifyUnreved(rename.unreved) : rename.unreved;

显示我们可以使用 option.modifyUnreved 将 unreved 更改为我们的 regRule

所以在 gulpfile.js 中

revplace({
    manifest: manifest,
    modifyUnreved: function(filename){
        var tmp = filename.split(".");
        tmp[0] = tmp[0] + "(?:-[a-z0-9]{10})?";
        return new RegExp(tmp.join('.'), 'ig');
    }
})

并且它可以就地替换静态文件名