Provide an example without gulp-useref

[lionelB]

Hello,

I try to figure how use gulp-rev with gulp-rev-replace together. I'm not using gulp-useref. Is it possible to use it alone ?

thanks

[JosefJezek]

:+1:

[dewwwald]

A please do vote up. How is this coming along?

[lionelB]

I end up with this solution/ Hope it could help.

var rev = require("gulp-rev");
var replace = require("gulp-replace");
gulp.task("revision", ["dist:css", "dist:js"], function(){
  return gulp.src(["dist/**/*.css", "dist/**/*.js"])
    .pipe(rev())
    .pipe(gulp.dest(opt.distFolder))
    .pipe(rev.manifest())
    .pipe(gulp.dest(opt.distFolder))
})

gulp.task("revreplace", ["revision"], function(){
  var manifest = require("./" + opt.distFolder + "/rev-manifest.json");
  var stream = gulp.src(opt.distFolder + "/index.html");

  Object.keys(manifest).reduce(function(stream, key){ 
    return stream.pipe(replace(key, manifest[key]));
  }, stream).pipe(gulp.dest(opt.distFolder));
});

[dewwwald]

This is Awesome!

[jamesknelson]

Cheers @lionelB, I've added this to the README

[larrybotha]

Just a note for anyone else coming across this - https://github.com/jamesknelson/gulp-rev-replace/issues/23#issuecomment-74087558 can be improved with a more robust regex:

gulp.task("revreplace", ["revision"], function(){
  var manifest = require("./" + opt.distFolder + "/rev-manifest.json");
  var stream = gulp.src(opt.distFolder + "/index.html");

  Object.keys(manifest).reduce(function(stream, key){
    var regKey = key.replace('/', '\\/');

    return stream.pipe(replace(new RegExp("(" + regKey + ")(?!\\w)", "g"), manifest[key]));
  }, stream).pipe(gulp.dest(opt.distFolder));
});

This ensures that a match in the stream is true only if it is not followed by another word character.

e.g. my-font.woff will not produce false positives for my-font.woff2, and my-font.woff['|"|?|)] will match correctly, and be replaced globally.

EDIT: can be improved with a negative look-behind equivalent for non-word characters too (js doesn't support those, however). e.g. currently lovely.svg will return a false positive for my-lovely.svg

[lionelB]

@jamesknelson Coool!

@larrybotha nice catch !