Gulp-Rev-replace not replacing my the file path with the gulp-rev hash

Question

Similar to this question here: How do I replace the filenames listed in index.html with the output of gulp-rev?

Im using gulp-useref to combine the files listed in my build blocks. I would like to use gulp-rev to add a hash to the end of the concatenated file and update my markup with the new filename.

As per the gulp-rev-replace doc, im using this almost exactly with minor tweaks:

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

my html looks like so:

<!-- 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 -->

the output I get is:

<link rel="stylesheet" href="css/combined.css">
<script src="js/lib.js">
the </script>

but what im looking for is something like:

<link rel="stylesheet" href="css/combined-ABC234.css">
<script src="js/lib-TYU765.js"></script>

directory structure:

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

Any help is greatly appreciated!

Answer 1

You need to pass an option to revReplace(), like so:

.pipe(revReplace({replaceInExtensions: ['.cshtml']}));

By default, gulp-rev-replace will perform changes only on ['.js', '.css', '.html', '.hbs'].

More information on https://www.npmjs.com/package/gulp-rev-replace#options-replaceinextensions.

I was working with .ejs and had a similar issue. Hope this helps..

Answer 2

Thanks for updating your question! I tried your Gulp-Setup yesterday and found out, that the useref and rev plugin's won't work if the path to your assets are incorrect. In your sample, the *.cshtml files are all in the folder views, but pointing to ressources which are on one level above. Going from a file inside views (like views/index.cshtml, the path css/components/style1.css cannot be resolved, because it should actually be ../css/components/style1.css. Therefore useref gets an empty resultset, does not create any files, and rev cannot update because it has no point to reference to.

Get the paths in your cshtml right so that they're relative to the real ressources, than it will work. I hope you can because that setup looks a little Dotnetty, and I'm not sure if you have freedom there to change things ;-)