Menu icon Foundation
Add cache-busting file hashes to css/js using F6's gulpfile?

I'm trying to use gulp-rev / gulp-rev-replace to append filehashes to filenames using gulp. 

I'm ok with basic gulp, but the way the foundation gulpfile is structured is leaving me somewhat confused as to how to proceed. 

Generally, you'd use gulp-rev, do you thing, and then use gulp-rev-replace to update links to the new filenames. 

But the foundation gulpfile has separate functions for pages, css, js, etc... that run in parallel (right?). 

So while I can easily add file hashes to css/js files, I can't work out how to then update the references to the new filenames in the html. 

Has anyone got any thoughts or done anything similar? 

https://github.com/sindresorhus/gulp-rev

https://github.com/jamesknelson/gulp-rev-replace

F6foundation 6gulpgulp-rev

I'm trying to use gulp-rev / gulp-rev-replace to append filehashes to filenames using gulp. 

I'm ok with basic gulp, but the way the foundation gulpfile is structured is leaving me somewhat confused as to how to proceed. 

Generally, you'd use gulp-rev, do you thing, and then use gulp-rev-replace to update links to the new filenames. 

But the foundation gulpfile has separate functions for pages, css, js, etc... that run in parallel (right?). 

So while I can easily add file hashes to css/js files, I can't work out how to then update the references to the new filenames in the html. 

Has anyone got any thoughts or done anything similar? 

https://github.com/sindresorhus/gulp-rev

https://github.com/jamesknelson/gulp-rev-replace

Rafi Benkual almost 3 years ago

There is a Clean function for cache busting in the ZURB Stack but it seems like you are looking for the best way to add gulp-rev?

bill almost 3 years ago

Not specifically. I haven't seen any reference to a clean function in the Zurb Stack.. can you point me at some docs or something?

The only clean function I have seen simply deletes the contents of the 'dist' folder. It doesn't seem to do anything related to cache-busting. 

Gulp-rev just seems to be the standard way to do it (adding file hashes to filenames). I might have worked out how to do it with gulp-rev, but I haven't had a chance to try my idea yet. If there's a built in way then that'd be useful to know about. 

bill almost 3 years ago

Just a follow up to say that the solution was to use gulp-rev with rev-collector rather than rev-replace. 

I might be able to put together a pull request to add the functionality to foundation if it's useful or not already there. 

I just took a quick look at github and I notice that the gulp files have changed dramatically from the version I have. (6.2 or 6.2.1 I think). 

Was the functionality added recently? If I do a pull request I'll have to rework it and test it on the new gulp setup. 

Mark Hair almost 3 years ago

Bill,

Even though there doesn't seem to have been an interest in a pull request, I am interested in your solution. Would you be wiling to make it available?

Thanks,

Mark

Paul Kirby over 2 years ago

Hey Guys, 

Landed on this post trying to do a similar thing. The solution I found after messing around with gulp-rev and trying to get that functioning was to simply use gulp-rev-all. It bundles the entire process together, and is very easy to use. 

Install gulp-rev-all, add 

// Replace base file names with gulp-rev appended files for cache busting, only on production
function revAll() {
    return gulp.src(PATHS.dist + '/**')
    .pipe($.if(PRODUCTION, rev.revision({
      dontRenameFile: [/^\/favicon.ico$/g, '.html'],
      dontUpdateReference: ['.html'],
    })))
    .pipe(gulp.dest(PATHS.dist));
}

 to your gulp file, and change the build task to 

// Build the "dist" folder by running all of the below tasks
gulp.task('build',
gulp.series(clean, gulp.parallel(pages, sass, javascript, images, copy), styleGuide, revAll));

 

Only cache-busting in production since there is no need to add a step in watch. 

Worked like a charm for me, Cheers! 

Ian Daly 12 months ago

Bump on this thread. Any documentation on getting cache busting implemented with F6.4? Tried Paul Kirbys solution but am met with errors.