docs(recipes): update asset-revisioning (#777)

* docs(recipes): update asset-revisioning see: #742 Signed-off-by: Antoine Leblanc <[email protected]> * docs(recipes): use use regular expressions for asset-revisioning Signed-off-by: Antoine Leblanc <[email protected]>
yeoman · May 5, 2020 · 9eb0d34 · 9eb0d34
1 parent 914138b
commit 9eb0d34
Showing 1 changed file with 20 additions and 11 deletions.
diff --git 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