diff --git a/docs/recipes/README.md b/docs/recipes/README.md index 3e822432a..f9aaa5a9c 100644 --- a/docs/recipes/README.md +++ b/docs/recipes/README.md @@ -28,3 +28,4 @@ * [Rollup with rollup-stream](rollup-with-rollup-stream.md) * [Run gulp task via cron job](cron-task.md) * [Running shell commands](running-shell-commands.md) +* [Static asset revisioning](static-asset-revisioning.md) diff --git a/docs/recipes/static-asset-revisioning.md b/docs/recipes/static-asset-revisioning.md new file mode 100644 index 000000000..232793062 --- /dev/null +++ b/docs/recipes/static-asset-revisioning.md @@ -0,0 +1,33 @@ +# Static asset revisioning + +Static asset revisioning by appending content hash to filenames. Make sure to set the files to [never expire](http://developer.yahoo.com/performance/rules.html#expires) for this to have an effect. + +```sh +npm install --save-dev gulp gulp-rev gulp-rev-rewrite gulp-rev-delete-original +``` + +```js +const gulp = require('gulp') +const rev = require('gulp-rev') +const revRewrite = require('gulp-rev-rewrite') +const revDelOriginal = require('gulp-rev-delete-original') + +function revisionAssets() { + return gulp + // add assets you want to revision + .src(`dist/**/*.{css,js}`) + // append conent hash + .pipe(rev()) + // delete original (unrevved) assets from "dist" + .pipe(revDelOriginal()) + // add files that contain references to those assets + // now we have revved assets and HTML files in the stream + .pipe(gulp.src(`dist/**/*.html`)) + // update references to the assets + .pipe(revRewrite()) + // output revved assets along with HTML files with updated references + .pipe(gulp.dest('dist')) +} + +exports.revisionAssets = revisionAssets +```