Watch twig gulp task

GovCMS-kss-template/index.twig

@@ -21,7 +21,7 @@
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>

config.json

@@ -2,29 +2,25 @@
   "name": "govcms8_uikit_starter",
   "description": "GovCMS 8 UI Kit Starter theme based on UI Kit.",
   "css": {
-    "file" : "style.scss",
-    "src": [
-      "./assets/scss/**/*.scss"
-    ],
+    "file": "style.scss",
+    "src": ["./assets/scss/**/*.scss"],
     "dest": "css"
   },
   "js": {
-    "file" : "govcms8_uikit_starter.js",
-    "src": [
-      "./assets/js/**/*.js"
-    ],
+    "file": "govcms8_uikit_starter.js",
+    "src": ["./assets/js/**/*.js"],
     "dest": "js"
   },
   "uikit_js": {
-    "src": [
-      "./assets/uikit/js/*.js"
-    ],
+    "src": ["./assets/uikit/js/*.js"],
     "dest": "js"
   },
+  "twig": {
+    "src": ["./templates/**/*.twig"],
+    "watch": true
+  },
   "images": {
-    "src": [
-      "./assets/images/**/*"
-    ],
+    "src": ["./assets/images/**/*"],
     "dest": "images"
   }
 }

default.config-local.json

@@ -1,6 +1,7 @@
 {
   "name": "govcms8_uikit_starter",
   "description": "GovCMS 8 UI Kit Starter local config file.",
-  "browserSyncProxy" : "your_local_url",
-  "browserSyncPort" : 3000
+  "browserSyncProxy": "your_local_url",
+  "browserSyncPort": 3000,
+  "watchTwig": true
 }

gulpfile.js

@@ -168,10 +168,21 @@ gulp.task('removeSourceMaps', function() {
   return del(['./css/style.css.map', './js/govcms8_uikit_starter.js.map']);
 });
 
+// Twig
+gulp.task("twig", function() {
+  return gulp
+    .src(config.twig.src)
+    .pipe(browserSync.reload({ stream: true, match: "**/*.twig" }));
+});
+
+
 // Watch task.
 gulp.task('watch', function() {
   gulp.watch(config.css.src, { usePolling: true }, gulp.series('css_dev'));
   gulp.watch(config.js.src, { usePolling: true }, gulp.series('scripts_dev', 'removeTemporaryStorage'));
+  if (configLocal.watchTwig) {
+    gulp.watch(config.twig.src, gulp.series("twig"));
+  }
 });
 
 // JS Linting.

styleguide/index.html

@@ -22,7 +22,7 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
   <nav class="kss-nav">
     <ul class="kss-nav__menu">
       <li class="kss-nav__menu-item">
-        <a class="kss-nav__menu-link" href="./">
+        <a class="kss-nav__menu-link" href="./index.html">
           <span class="kss-nav__ref">0</span
           ><span class="kss-nav__name">Overview</span>
         </a>
@@ -43,10 +43,10 @@ <h1 class="kss-doc-title">GovCMS 8 UI-Kit Starter Style Guide</h1>
         <div id="kssref-0" class="kss-section kss-section--depth-0 kss-overview kss-style">
       <h1>GovCMS 8 UI-Kit Starter Styleguide</h1>
 
-<p>This styleguide is showing only the UI-Kit components with a reasonable 
-template. It is not providing a comprehensive list of every style 
+<p>This styleguide is showing only the UI-Kit components with a reasonable
+template. It is not providing a comprehensive list of every style
 available in UI-Kit or the theme. Feel free to add other components as needed.</p>
-<p>For live examples of other styling, install the defaul content and visit 
+<p>For live examples of other styling, install the default content and visit
 the <strong>/test</strong> page.</p>