Gulp revRewrite mod不适用于重写项目中的css和js答案

【问题标题】：Gulp revRewrite mod not working for rewrite css and js in projectGulp revRewrite mod不适用于重写项目中的css和js
【发布时间】：2019-06-08 23:02:54
【问题描述】：

我正在使用来自 npm 的 Gulp v.4 以及 gulp-rev 和 gulp-rev-rewrite 模块来防止 Cash Busting CSS 和 JS。但是即使我已经阅读了很多指南和注释，它仍然无法正常工作。实际上 gulp-rev mod 运行良好，但是当我想重写 html 中的链接（例如我的拿铁文件）时，它不会重写名称。

gulp.task('rev', () =>
    gulp.src('web/dist/**/*.{css,js}')
        .pipe(rev())
        .pipe(gulp.dest('web/dist/build'))
        .pipe(rev.manifest())
        .pipe(gulp.dest('web/dist'))
);


function rew() {
    const manifest = gulp.src('web/dist/rev-manifest.json');

    return gulp.src('app/FrontModule/templates/_styles.latte')
        .pipe(revRewrite({ manifest: manifest }))
        .pipe(gulp.dest('test'));
}

在 rev-manifest.json 我有这样的东西：

{
  "bootstrap-t4s.min.css": "bootstrap-t4s-85b8c0fa84.min.css",
}

在 html (latte) _styles.latte 我有这个：

<link rel="stylesheet" href="css/bootstrap-t4s.min.css" media="all">

当我运行 gulp 函数以使用 json 重写该文件时，我将得到与以前相同的 _styles.latte：

<link rel="stylesheet" href="css/bootstrap-t4s.min.css" media="all">

那么我做错了什么？

【问题讨论】：

标签： javascript css node.js npm gulp

【解决方案1】：

默认情况下，gulp-rev-rewrite 仅替换 js、css、html 和车把文件中出现的文件名。您可以使用replaceInExtensions 覆盖该默认值。在这种情况下：

function rew() {
  const manifest = gulp.src("web/dist/rev-manifest.json");

  return gulp
    .src("app/FrontModule/templates/_styles.latte")
    .pipe(revRewrite({ manifest: manifest, replaceInExtensions: [".latte"] }))
    .pipe(gulp.dest("test"));
}

【讨论】：