diff --git a/docs/recipes/asset-revisioning.md b/docs/recipes/asset-revisioning.md index 9c6a58ff..361cea47 100644 --- a/docs/recipes/asset-revisioning.md +++ b/docs/recipes/asset-revisioning.md @@ -15,24 +15,33 @@ $ npm install --save-dev gulp-rev gulp-rev-replace ``` * [gulp-rev](https://github.com/sindresorhus/gulp-rev) appends content hashes -* [gulp-rev-replace](https://github.com/jamesknelson/gulp-rev-replace) updates references to those files +* [gulp-rev-rewrite](https://github.com/TheDancingCode/gulp-rev-rewrite) updates references to those files ### 2. Update the `html` task Instead of wasting performance reading CSS and JS files into a new stream, we can notice that we already have that stream available in the `html` task, so we can just perform revving there: ```diff -gulp.task('html', ['styles'], () => { - return gulp.src('app/*.html') +function html() { + return src('app/*.html') .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) - .pipe($.if('*.js', $.uglify())) - .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false}))) -+ .pipe($.if('*.js', $.rev())) -+ .pipe($.if('*.css', $.rev())) -+ .pipe($.revReplace()) - .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true}))) - .pipe(gulp.dest('dist')); -}); + .pipe($.if(/\.js$/, $.uglify({compress: {drop_console: true}}))) + .pipe($.if(/\.css$/, $.postcss([cssnano({safe: true, autoprefixer: false})]))) ++ .pipe($.if(/\.js$/, $.rev())) ++ .pipe($.if(/\.css$/, $.rev())) ++ .pipe($.revRewrite()) + .pipe($.if(/\.html$/, $.htmlmin({ + collapseWhitespace: true, + minifyCSS: true, + minifyJS: {compress: {drop_console: true}}, + processConditionalComments: true, + removeComments: true, + removeEmptyAttributes: true, + removeScriptTypeAttributes: true, + removeStyleLinkTypeAttributes: true + }))) + .pipe(dest('dist')); +} ``` * `.pipe($.if('*.js', $.rev()))` – at this point we have JS files in the stream, so we are revving them