Split review app tasks into app/tasks (without Gulp)

Procfile

@@ -1 +1 @@
-web: npm run heroku
+web: npm start --workspace app

app/gulpfile.mjs

@@ -0,0 +1,9 @@
+import gulp from 'gulp'
+
+import * as build from './tasks/build/index.mjs'
+
+/**
+ * Build target tasks
+ */
+gulp.task('build', build.dist)
+gulp.task('dev', build.dev)

app/package.json

@@ -9,7 +9,10 @@
   },
   "license": "MIT",
   "scripts": {
+    "build": "gulp build",
+    "dev": "gulp dev",
     "serve": "nodemon",
+    "prestart": "npm run build",
     "start": "node src/start.mjs"
   },
   "dependencies": {
@@ -21,6 +24,8 @@
     "govuk_frontend_toolkit": "^9.0.1",
     "govuk_template_jinja": "^0.26.0",
     "govuk-elements-sass": "3.1.3",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
     "highlight.js": "^11.7.0",
     "html5shiv": "^3.7.3",
     "iframe-resizer": "3.5.15",
@@ -32,7 +37,8 @@
     "nodemon": "^2.0.21",
     "nunjucks": "^3.2.3",
     "outdent": "^0.8.0",
-    "shuffle-seed": "^1.1.6"
+    "shuffle-seed": "^1.1.6",
+    "slash": "^5.0.0"
   },
   "devDependencies": {
     "cheerio": "^1.0.0-rc.12",

app/tasks/assets.mjs

@@ -0,0 +1,14 @@
+import { join } from 'path'
+
+import { paths } from '../../config/index.js'
+import * as files from '../../tasks/files.mjs'
+
+/**
+ * Copy GOV.UK Frontend static assets
+ */
+export async function assets () {
+  await files.copy('**/*', {
+    srcPath: join(paths.src, 'govuk/assets'),
+    destPath: join(paths.app, 'dist/assets')
+  })
+}

app/tasks/build/dev.mjs

@@ -0,0 +1,14 @@
+import * as npm from '../../../tasks/npm.mjs'
+import * as tasks from '../index.mjs'
+
+import * as build from './index.mjs'
+
+/**
+ * Dev task
+ * Runs a sequence of tasks on start
+ */
+export default async function dev () {
+  await build.dist()
+  await tasks.watch()
+  await npm.run('serve')
+}

app/tasks/build/dist.mjs

@@ -0,0 +1,15 @@
+import * as tasks from '../index.mjs'
+
+/**
+ * Build review app task
+ * Prepare dist folder for review app
+ */
+export default async function build () {
+  await tasks.clean()
+
+  await Promise.all([
+    tasks.assets(),
+    tasks.scripts(),
+    tasks.styles()
+  ])
+}

app/tasks/build/index.mjs

@@ -0,0 +1,5 @@
+/**
+ * Build target tasks
+ */
+export { default as dev } from './dev.mjs'
+export { default as dist } from './dist.mjs'

app/tasks/clean.mjs

@@ -0,0 +1,13 @@
+import { join } from 'path'
+
+import { paths } from '../../config/index.js'
+import * as files from '../../tasks/files.mjs'
+
+/**
+ * Clean task
+ */
+export async function clean () {
+  await files.clean('**/*', {
+    destPath: join(paths.app, 'dist')
+  })
+}

app/tasks/index.mjs

@@ -0,0 +1,8 @@
+/**
+ * Build tasks
+ */
+export { assets } from './assets.mjs'
+export { clean } from './clean.mjs'
+export { compile as scripts } from './scripts.mjs'
+export { compile as styles } from './styles.mjs'
+export { watch } from './watch.mjs'

app/tasks/scripts.mjs

@@ -0,0 +1,25 @@
+import { join } from 'path'
+
+import { paths } from '../../config/index.js'
+import * as npm from '../../tasks/npm.mjs'
+import * as scripts from '../../tasks/scripts.mjs'
+
+/**
+ * JavaScripts task (for watch)
+ * Compilation, documentation
+ */
+export async function compile () {
+  await scripts.compile('all.mjs', {
+    srcPath: join(paths.src, 'govuk'),
+    destPath: join(paths.app, 'dist/javascripts'),
+
+    filePath (file) {
+      return join(file.dir, `${file.name}.min.js`)
+    }
+  })
+
+  // Build JSDoc for /docs/javascript
+  await npm.run('build:jsdoc')
+}
+
+compile.displayName = 'compile:scripts'

app/tasks/styles.mjs

@@ -0,0 +1,25 @@
+import { join } from 'path'
+
+import { paths } from '../../config/index.js'
+import * as npm from '../../tasks/npm.mjs'
+import * as styles from '../../tasks/styles.mjs'
+
+/**
+ * Stylesheets task (for watch)
+ * Compilation, documentation
+ */
+export async function compile () {
+  await styles.compile('**/[!_]*.scss', {
+    srcPath: join(paths.app, 'src/stylesheets'),
+    destPath: join(paths.app, 'dist/stylesheets'),
+
+    filePath (file) {
+      return join(file.dir, `${file.name}.min.css`)
+    }
+  })
+
+  // Build SassDoc for /docs/sass
+  await npm.run('build:sassdoc')
+}
+
+compile.displayName = 'compile:styles'

tasks/gulp/watch.mjs → app/tasks/watch.mjs

@@ -2,7 +2,10 @@ import gulp from 'gulp'
 import slash from 'slash'
 
 import { paths } from '../../config/index.js'
-import * as npm from '../npm.mjs'
+import * as npm from '../../tasks/npm.mjs'
+
+import * as scripts from './scripts.mjs'
+import * as styles from './styles.mjs'
 
 /**
  * Watch task
@@ -15,23 +18,21 @@ import * as npm from '../npm.mjs'
 export function watch () {
   return Promise.all([
     gulp.watch([
-      'sassdoc.config.yaml',
+      `${slash(paths.app)}/sassdoc.config.yaml`,
       `${slash(paths.app)}/src/**/*.scss`,
       `${slash(paths.src)}/govuk/**/*.scss`,
       `!${slash(paths.src)}/govuk/vendor/*`
     ], gulp.parallel(
-      npm.run('lint:scss'),
-      'styles'
+      npm.task('lint:scss'),
+      styles.compile
     )),
 
     gulp.watch([
-      'jsdoc.config.js',
+      `${slash(paths.app)}/jsdoc.config.js`,
       `${slash(paths.src)}/govuk/**/*.mjs`
     ], gulp.parallel(
-      npm.run('lint:js'),
-      'scripts'
+      npm.task('lint:js'),
+      scripts.compile
     ))
   ])
 }
-
-watch.displayName = 'watch'

app/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../tsconfig.base.json",
-  "include": ["./src/**/*.mjs", "./src/**/*.json"],
-  "exclude": ["./src/**/*.test.*"],
+  "include": ["**/*.mjs", "**/*.json"],
+  "exclude": ["**/*.test.*", "./public/**"],
   "compilerOptions": {
     "resolveJsonModule": true
   }

docs/contributing/tasks.md

@@ -8,7 +8,7 @@ To run the application without any tasks being triggered, see [Express app only]
 
 npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 
-**`npm start` will trigger `gulp dev` that will:**
+**`npm start` will trigger `npm run dev --workspace app` that will:**
 
 - clean the `./app/dist` folder
 - copy fonts and images
@@ -26,11 +26,6 @@ npm scripts are defined in `package.json`. These trigger a number of Gulp tasks.
 
 - start up Express, restarting when `.mjs`, `.json` or `.yaml` files change
 
-**`npm run heroku` runs on Heroku build/PR and it will:**
-
-- run `npm run build:app`
-- start up Express
-
 **`npm run build:app` will do the following:**
 
 - clean the `./app/dist` folder

gulpfile.mjs

@@ -1,61 +1,13 @@
-import { join } from 'path'
-
 import gulp from 'gulp'
 
-import { paths } from './config/index.js'
 import * as build from './tasks/build/index.mjs'
-import { browser, files, scripts, styles, npm } from './tasks/index.mjs'
-
-/**
- * Umbrella scripts tasks (for watch)
- * Runs JavaScript code quality checks, documentation, compilation
- */
-gulp.task('scripts', gulp.series(
-  scripts.compile('all.mjs', {
-    srcPath: join(paths.src, 'govuk'),
-    destPath: join(paths.app, 'dist/javascripts'),
-
-    filePath (file) {
-      return join(file.dir, `${file.name}.min.js`)
-    }
-  }),
-
-  npm.run('build:jsdoc')
-))
-
-/**
- * Umbrella styles tasks (for watch)
- * Runs Sass code quality checks, documentation, compilation
- */
-gulp.task('styles', gulp.series(
-  styles.compile('**/[!_]*.scss', {
-    srcPath: join(paths.app, 'src/stylesheets'),
-    destPath: join(paths.app, 'dist/stylesheets'),
-
-    filePath (file) {
-      return join(file.dir, `${file.name}.min.css`)
-    }
-  }),
-
-  npm.run('build:sassdoc')
-))
+import { browser } from './tasks/index.mjs'
 
 /**
  * Build target tasks
  */
-gulp.task('build:app', build.app())
-gulp.task('build:package', build.package())
-gulp.task('build:dist', build.dist())
-
-/**
- * Dev task
- * Runs a sequence of tasks on start
- */
-gulp.task('dev', gulp.series(
-  'build:app',
-  files.watch,
-  npm.run('serve', ['--workspace', 'app'])
-))
+gulp.task('build:package', build.package)
+gulp.task('build:dist', build.dist)
 
 /**
  * Screenshots task

jest-dev-server.config.js

@@ -4,7 +4,8 @@ const { ports } = require('./config/index.js')
  * @type {import('jest-dev-server').Config}
  */
 module.exports = {
-  command: 'npm start --workspace app',
+  // Start Express.js without "prestart" build script
+  command: 'npm start --ignore-scripts --workspace app',
   port: ports.app,
 
   // Skip when already running

package.json

@@ -14,15 +14,14 @@
   ],
   "scripts": {
     "postinstall": "npm ls --depth=0",
-    "start": "gulp dev",
+    "start": "npm run dev --workspace app",
     "serve": "npm run serve --workspace app",
-    "heroku": "npm run build:app && npm start --workspace app",
     "build-release": "./bin/build-release.sh",
     "publish-release": "./bin/publish-release.sh",
     "pre-release": "./bin/pre-release.sh",
     "build:sassdoc": "sassdoc --config sassdoc.config.yaml ./src/govuk",
     "build:jsdoc": "jsdoc --configure jsdoc.config.js ./src/govuk",
-    "build:app": "gulp build:app",
+    "build:app": "npm run build --workspace app",
     "build:package": "gulp build:package",
     "build:dist": "gulp build:dist",
     "build:types": "tsc --build",