From bdae8f9e7a604aecc6b561a3be660eddd0e6dd15 Mon Sep 17 00:00:00 2001
From: Makro Ilic <marko@weareneopix.com>
Date: Mon, 21 Oct 2019 22:03:59 +0200
Subject: [PATCH] docs(nunjucks): update recipe

Read more: yeoman/generator-webapp#742
---
 docs/recipes/nunjucks.md | 160 +++++++++++++++------------------------
 1 file changed, 59 insertions(+), 101 deletions(-)

diff --git a/docs/recipes/nunjucks.md b/docs/recipes/nunjucks.md
index 2014b5ad..4d95b643 100644
--- a/docs/recipes/nunjucks.md
+++ b/docs/recipes/nunjucks.md
@@ -60,132 +60,90 @@ Create `app/index.njk`, where you can paste the `<div class="container">` part f
 ### 4. Create a `views` task
 
 ```js
-gulp.task('views', () => {
-  return gulp.src('app/*.njk')
-    .pipe($.nunjucksRender({
-      path: 'app'
-    }))
-    .pipe(gulp.dest('.tmp'))
-    .pipe(reload({stream: true}));
-});
+function views() {
+  return src('app/*.njk')
+    .pipe($.nunjucksRender({path: 'app'}))
+    .pipe(dest('.tmp'))
+    .pipe(server.reload({stream: true}));
+};
 ```
 
 This compiles `app/*.njk` files into static `.html` files in the `.tmp` directory.
 
-### 5. Create a 'views:reload' task
-
-```js
-gulp.task('views:reload', ['views'], () => {
-  reload();
-});
-```
-
 This triggers Browsersync after `views` task is completed
 
-### 6. Add `views` as a dependency of both `html` and `serve`
+### 5. Add `views` as a dependency of both `build` and `serve`
 
-```js
-gulp.task('html', ['views', 'styles', 'scripts'], () => {
-  // ...
-});
-```
-
-```js
-gulp.task('serve', () => {
-  runSequence(['clean', 'wiredep'], ['views', 'styles', 'scripts', 'fonts'], () => {
-    // ...
-  });
-});
+```diff
+if (isDev) {
+- serve = series(clean, parallel(styles, scripts, fonts), startAppServer);
++ serve = series(clean, parallel(views, styles, scripts, fonts), startAppServer);
+} else if (isTest) {
+- serve = series(clean, scripts, startTestServer);
++ serve = series(clean, parallel(views, scripts), startTestServer);
+} else if (isProd) {
+  serve = series(build, startDistServer);
+}
 ```
 
-### 7. Configure `html` task to include files from `.tmp`
+```diff
+const build = series(
+  clean,
+  parallel(
+    lint,
+-   series(parallel(styles, scripts), html),
++   series(parallel(views, styles, scripts), html),
+    images,
+    fonts,
+    extras
+  ),
+  measureSize
+);
+```
+
+### 6. Configure `html` task to include files from `.tmp`
 
 ```diff
- gulp.task('html', ['styles', 'views', 'scripts'], () => {
--  return gulp.src('app/*.html')
-+  return gulp.src(['app/*.html', '.tmp/*.html'])
-     .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
-     .pipe($.if('*.js', $.uglify()))
-     .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
-     .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true})))
-     .pipe(gulp.dest('dist'));
- });
+function html() {
+-  return src(['app/*.html'])
++  return src(['app/*.html', '.tmp/*.html'])
+    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
+  ...
 ```
 
-### 8. Update `extras`
+### 7. Update `extras`
 
 We don't want to copy over `.njk` files in the build process:
 
 ```diff
- gulp.task('extras', () => {
-   return gulp.src([
-     'app/*.*',
--    '!app/*.html'
+function extras() {
+  return src([
+    'app/*',
+-    '!app/*.html',
 +    '!app/*.html',
 +    '!app/*.njk'
-   ], {
-     dot: true
-   }).pipe(gulp.dest('dist'));
- });
-```
-
-### 9. Configure `wiredep` task to wire Bower components on layout templates only
-
-Wiredep does not support `.njk` ([yet](https://github.com/taptapship/wiredep/pull/258)), so also add in the file type definition.
-
-```diff
-  gulp.task('wiredep', () => {
-    ...
-
--   gulp.src('app/*.html')
-+   gulp.src('app/layouts/*.njk')
-      .pipe(wiredep({
-        exclude: ['bootstrap-sass'],
--       ignorePath: /^(\.\.\/)*\.\./
-+       ignorePath: /^(\.\.\/)*\.\./,
-+       fileTypes: {
-+         njk: {
-+           block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
-+           detect: {
-+             js: /<script.*src=['"]([^'"]+)/gi,
-+             css: /<link.*href=['"]([^'"]+)/gi
-+           },
-+           replace: {
-+             js: '<script src="{{filePath}}"></script>',
-+             css: '<link rel="stylesheet" href="{{filePath}}" />'
-+           }
-+         }
-+       }
-+     }))
--     .pipe(gulp.dest('app'));
-+     .pipe(gulp.dest('app/layouts'));
-  });
+  ], {
+    dot: true
+  }).pipe(dest('dist'));
+};
 ```
 
-
-### 10. Edit your `serve` task
+### 8. Edit your `serve` task
 
 Edit your `serve` task so that editing `.html` and `.njk` files triggers the `views:reload` task:
 
 ```diff
-  gulp.task('serve', ['views', 'styles', 'fonts'], () => {
-    runSequence(['clean', 'wiredep'], ['views', 'styles', 'scripts', 'fonts'], () => {
-      ...
-
-    gulp.watch([
--     'app/*.html',
-      'app/scripts/**/*.js',
-      'app/images/**/*',
-      '.tmp/fonts/**/*'
-    ]).on('change', reload);
-     
-+     gulp.watch('app/**/*.{html,njk}', ['views:reload']);
-      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,njk}', views);
+  watch('app/styles/**/*.scss', styles);
+  watch('app/scripts/**/*.js', scripts);
+  watch('app/fonts/**/*', fonts);
+});
 ```
 
 Notice we are still watching `.html` files in `app` because our templates have a different extension.