Gulp revRewrite mod not working for rewrite css and js in project

Question

I am using Gulp v.4 from npm with gulp-rev and gulp-rev-rewrite mods for prevent Cash Busting CSS and JS. But even if I already read lots of guides and notes, it still not work as it should. Actually gulp-rev mod working well, but when I want rewrite links inside html (for mine example latte file), it not rewrite that names.

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'));
}

In rev-manifest.json I have something like this:

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

and in html (latte) _styles.latte I have this:

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

when I run gulp function for rewrite that file with json, I will get _styles.latte that looks same as before:

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

So what I am doing wrong?

Answer 1

By default, gulp-rev-rewrite only replaces filename occurrences in js, css, html and handlebars files. You can use the replaceInExtensions to override that default. In this case:

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"));
}