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!

I'm worried about revAll, since you don't use it in your pipeline. Can you explain why you need this plugin? — ddprrt, Apr 28 '15 at 20:03
Another question: Are those JS files and CSS files in the output directory? Related: Can you show me how your file structure is? When userefAssets can't read the assets, it won't create any files, thus rev and rev-replace can't work — ddprrt, Apr 28 '15 at 20:38
ddprrt - Ive updated my code with gulp-rev-replace, as it was a typo. been actually trying to use both but could not get either of them to work. Thanks! If you know of a better way to get concated-minified-rev'd file names into their corresponding html files, please let me know. — PoiPoi716, Apr 28 '15 at 23:44

score 9 · Answer 1 · answered Nov 17 '15 at 12:16

9

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

answered Nov 17 '15 at 12:16

Aakash

21,375
7
100
81

1

I cannot find words to describe my gratitude. I've been fighting for hours changing versions and everything trying to figure out why rev-replace won't work and it was the extension! – Luis Palacios Dec 19 '18 at 20:42

score 1 · Accepted Answer · answered Apr 29 '15 at 07:30

1

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

answered Apr 29 '15 at 07:30

ddprrt

7,424
3
29
25

yes it is very .netty. With visual studio 2015 coming down pushing gulp/grunt tasks, we're trying to get ahead of the curve and just move over. – PoiPoi716 Apr 29 '15 at 15:44
Got the files paths updated, and the css/js are now being properly compiled and rev'd into their respective folders. Almost there! Now just need a rev-replace to update the filepaths in the html to point to the new rev'd files...which it doesnt do. Is rev-replace the right plugin to use? open to any other route as well. – PoiPoi716 Apr 29 '15 at 16:01
2

ddprrt - Got it working. Realized that rev-replace has and option `replaceInExtensions` that I needed to add cshtml to. Thanks! – PoiPoi716 Apr 29 '15 at 17:28
Hi Can You please share the complete gulf working file, i am also looking the same type of result like below. the output I get is: but what im looking for is something like: – raj Mar 04 '19 at 06:45

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

2 Answers2