Move TypeScript build:types to watch task

We already have type checks in editors and IDEs, plus we run `lint:types` during the GitHub Actions workflow

So this check is more useful as a watch task for early feedback

Adds flag `--incremental` to use the compiler cache (10x faster) and flag `--pretty` to preserve colour output via `concurrently` CLI

Author: colinrotherham

.github/workflows/tests.yml

@@ -96,7 +96,7 @@ jobs:
 
           - description: TypeScript compiler
             name: lint-types
-            run: npm run lint:types -- --incremental
+            run: npm run lint:types -- --incremental --pretty
             cache: '**/*.tsbuildinfo'
 
     steps:

packages/govuk-frontend-review/package.json

@@ -14,7 +14,7 @@
     "build:sassdoc": "sassdoc --config sassdoc.config.yaml ../govuk-frontend/src/govuk",
     "build:types": "tsc --build tsconfig.build.json",
     "build:jsdoc": "typedoc",
-    "postbuild": "npm run build:jsdoc && npm run build:sassdoc && npm run build:types",
+    "postbuild": "npm run build:jsdoc && npm run build:sassdoc",
     "proxy": "browser-sync start --config browsersync.config.js",
     "serve": "nodemon",
     "start": "node src/start.mjs",

packages/govuk-frontend-review/tasks/watch.mjs

@@ -52,11 +52,15 @@ export const watch = (options) =>
     task.name('lint:js watch', () =>
       gulp.watch(
         [join(options.srcPath, '**/*.{cjs,js,mjs}')],
+        gulp.parallel(
+          // Run TypeScript compiler
+          npm.script('build:types', ['--incremental', '--pretty'], options),
 
-        // Run ESLint checks
-        npm.script('lint:js:cli', [
-          slash(join(options.workspace, '**/*.{cjs,js,mjs}'))
-        ])
+          // Run ESLint checks
+          npm.script('lint:js:cli', [
+            slash(join(options.workspace, '**/*.{cjs,js,mjs}'))
+          ])
+        )
       )
     )
   )

packages/govuk-frontend/package.json

@@ -51,7 +51,7 @@
     "build:release": "gulp build:release --color",
     "build:stats": "npm run stats --workspace @govuk-frontend/stats",
     "build:types": "tsc --build tsconfig.build.json",
-    "postbuild:package": "npm run build:stats && npm run build:types && govuk-prototype-kit validate-plugin .",
+    "postbuild:package": "npm run build:stats && govuk-prototype-kit validate-plugin .",
     "dev": "gulp dev --color",
     "version": "echo $npm_package_version"
   },

packages/govuk-frontend/tasks/watch.mjs

@@ -46,11 +46,15 @@ export const watch = (options) =>
     task.name('lint:js watch', () =>
       gulp.watch(
         [join(options.srcPath, '**/*.{cjs,js,mjs}')],
+        gulp.parallel(
+          // Run TypeScript compiler
+          npm.script('build:types', ['--incremental', '--pretty'], options),
 
-        // Run ESLint checks
-        npm.script('lint:js:cli', [
-          slash(join(options.workspace, '**/*.{cjs,js,mjs}'))
-        ])
+          // Run ESLint checks
+          npm.script('lint:js:cli', [
+            slash(join(options.workspace, '**/*.{cjs,js,mjs}'))
+          ])
+        )
       )
     ),