docs(recipes): update htmlhint (#779)

* docs(recipes): update htmlhint see: #742 Signed-off-by: Antoine Leblanc <[email protected]>
yeoman · May 7, 2020 · ace6195 · ace6195
1 parent 08ef3e7
commit ace6195
Showing 1 changed file with 36 additions and 13 deletions.
diff --git a/docs/recipes/htmlhint.md b/docs/recipes/htmlhint.md
@@ -17,11 +17,11 @@ $ npm install --save-dev gulp-htmlhint
 Let's create a task in our `gulpfile.js` which runs HTMLHint across all our HTML files and outputs the error in the terminal:
 
 ```js
-gulp.task('htmlhint', () => {
-  return gulp.src('app/**/*.html')
+function htmlhint() {
+  return src('app/**/*.html')
     .pipe($.htmlhint())
     .pipe($.htmlhint.reporter());
-});
+}
 ```
 
 Read [gulp-htmlhint's docs][api] to find out how you can pass options to HTMLHint.
@@ -30,25 +30,48 @@ Read [gulp-htmlhint's docs][api] to find out how you can pass options to HTMLHin
 
 HTMLHint should run on serve and build.
 
-```js
-gulp.task('html', ['htmlhint', 'styles', 'scripts'], () => {
+```diff
+ const build = series(
+   clean,
+   parallel(
+     lint,
+-    series(parallel(styles, scripts), html),
++    series(parallel(htmlhint, styles, scripts), html),
+     images,
+     fonts,
+     extras
+   ),
+   measureSize
+ );
 ```
 
-```js
-gulp.task('serve', () => {
-  runSequence(['clean', 'wiredep'], ['htmlhint', 'styles', 'scripts', 'fonts'], () => {
+```diff
+ let serve;
+ if (isDev) {
+-  serve = series(clean, parallel(styles, scripts, fonts), startAppServer);
++  serve = series(clean, parallel(htmlhint, styles, scripts, fonts), startAppServer);
+ } else if (isTest) {
+   serve = series(clean, scripts, startTestServer);
+ } else if (isProd) {
+   serve = series(build, startDistServer);
+ }
 ```
 
 ### 4. Run the task on each HTML change
 
 In the `serve` task add the following line to run `htmlhint` every time a HTML file in the `app` directory changes:
 
 ```diff
-+gulp.watch('app/**/*.html', ['htmlhint']);
- gulp.watch('app/styles/**/*.scss', ['styles']);
- gulp.watch('app/scripts/**/*.js', ['scripts']);
- gulp.watch('app/fonts/**/*', ['fonts']);
- gulp.watch('bower.json', ['wiredep', 'fonts']);
+   watch([
+     'app/*.html',
+     'app/images/**/*',
+     '.tmp/fonts/**/*'
+   ]).on('change', server.reload);
+
++  watch('app/*.html', htmlhint);
+   watch('app/styles/**/*.css', styles);
+   watch('app/scripts/**/*.js', scripts);
+   watch('app/fonts/**/*', fonts);
 ```
 
 ## Usage