gulp-rev with useref renaming index.html file as well

Question

I'm new to using gulp and am trying to create a gulpfile for my project.

My first task is to combine all my script and link tags present in index.html and replace them with only a single tag. To achieve this purpose, I'm making use of gulp-useref as below.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

This thing simply concatenates and minifies all my JS and CSS files and create a single script and link tag for them. All good till here.

Now, I wish to implement hashing to the combined JS and CSS files as well. For this, I'm using gulp-rev and gulp-rev-replace plugin like below.

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(rev())
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

This also works good but for one small thing. It creates the hashed filenames not only for my JS and CSS files but for my index.html file as well as below.

Is there a way by which I can avoid the renaming of index.html file while still preserving the JS and CSS hashed filenames because my server would look for the index.html file in the folder rather than index-*********.html?

Thanks.

score 2 · Answer 1 · answered Sep 20 '16 at 22:57

I'm not sure if this is the ideal way to solve the problem, but my solution was to apply gulpif to filter out css/js assets and then call rev(). revReplace should still update your index file to use the renamed css/js assets.

Essentially you can add the following pipe to your stream:

.pipe(gulpif(*.{js,css}, rev()))

Example based on your code:

gulp.task('useref', ['clean'], function () {
    return gulp.src(config.paths.app.src + 'index.html')    
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCSS()))
    .pipe(useref())
    .pipe(gulpif('*.{js,css}', rev()))
    .pipe(revReplace()) 
    .pipe(gulp.dest(config.paths.dist.src))
});

This worked for me although I had to do `.pipe(gulpif(/\.css|\.js$/, $.rev()))` — Mauvis Ledford, Nov 10 '16 at 04:47

score 0 · Answer 2 · answered Mar 08 '17 at 17:41

I had the same issue, but I was using gulp-rev-all instead of gulp-rev like you are.

My solution (workaround) will still work for you and others that are interested.

Essentially, you need to run another gulp-task after you 'rev' all of your files.

I use gulp-inject to grab the newly revisioned files, and inject them into my index.html file.

Step 1: use gulp-rev or gulp-rev-all in my case to revision your files and save them to your /dist folder.

Example:

gulp.task('rev', function () {

   var css= gulp
      .src(styles)
        .pipe(concat('main.css'))
     .pipe(RevAll.revision())
      .pipe(gulp.dest('dist/css'));

    var js = gulp
        .src(scripts)
        .pipe(concat('scripts.js'))
        .pipe(RevAll.revision())
        .pipe(gulp.dest('dist/js'));

    return merge(css, js); //merge is from the gulp plugin merge-stream.  It allows me to manipulate multiple streams in 1 task instead of having separate tasks.

});

Step 2: Use gulp-inject to inject the newly created css/js file references into your index.html

Markup your index.html like this:

  <!-- inject:css -->
  <!-- endinject -->

<!-- inject:js -->
<!-- endinject -->

Step 3: Use gulp-inject to grab the newly revisioned files and inject them into your index.html

gulp.task('inject',
    function() {
        var jsSource = gulp.src('./dist/js/*.js', { read: false });
        var cssSource = gulp.src('./dist/css/*.css', { read: false });
        return gulp.src('./index.html')
            .pipe(inject(merge(jsSource, cssSource)))
            .pipe(clean({force:true}))
        .pipe(gulp.dest('./'));
    });

In my project, I do NOT put the index.html in the dist folder. Maybe I should, but in this example/project I do not.

My folder structure

index.html
--/dist
---/js
---/css
---/views

gulp-inject documentation

gulp-rev-all documentation

Please let me know if there are any further questions, I would love to answer them

score -1 · Answer 3 · answered Jul 22 '16 at 13:57

try

var ignoreIndexHtml = gulpfilter(['**/*', '!**/index.html'], { restore: true });

return gulp
    .src('......')
    .pipe('......')
    .pipe('......')
    .pipe(ignoreIndexHtml)
    .pipe($.rev())    
    .pipe(ignoreIndexHtml.restore)    
    .pipe($.revReplace())
    .pipe(gulp.dest('......'));

gulp-rev with useref renaming index.html file as well

3 Answers3