From a5ffe65e7cf858067d8b4bcb64f268d0a3182353 Mon Sep 17 00:00:00 2001 From: Antoine Leblanc Date: Sat, 2 May 2020 21:30:36 +0200 Subject: [PATCH 1/2] docs(recipes): update asset-revisioning see: #742 Signed-off-by: Antoine Leblanc --- docs/recipes/asset-revisioning.md | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/docs/recipes/asset-revisioning.md b/docs/recipes/asset-revisioning.md index 9c6a58ff..6f014c3b 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$/, $.uglify({compress: {drop_console: true}}))) + .pipe($.if(/\.css$/, $.postcss([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($.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 From 89a886baa371a40ef11d2a68ee8d58508916c4ab Mon Sep 17 00:00:00 2001 From: Antoine Leblanc Date: Tue, 5 May 2020 17:14:22 +0200 Subject: [PATCH 2/2] docs(recipes): use use regular expressions for asset-revisioning Signed-off-by: Antoine Leblanc --- docs/recipes/asset-revisioning.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/recipes/asset-revisioning.md b/docs/recipes/asset-revisioning.md index 6f014c3b..361cea47 100644 --- a/docs/recipes/asset-revisioning.md +++ b/docs/recipes/asset-revisioning.md @@ -27,8 +27,8 @@ function html() { .pipe($.useref({searchPath: ['.tmp', 'app', '.']})) .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($.if(/\.js$/, $.rev())) ++ .pipe($.if(/\.css$/, $.rev())) + .pipe($.revRewrite()) .pipe($.if(/\.html$/, $.htmlmin({ collapseWhitespace: true,