From d2df07f91ba9fe0fc85f77aacd8d5c528cc66125 Mon Sep 17 00:00:00 2001 From: Chris Pymm Date: Wed, 26 Jun 2024 16:59:24 +0100 Subject: [PATCH] build(eleventy): amend 11ty config to allow reloading components from src directory Documentation examples by default load components from the built /package directory. This PR adds the ability to pass an ENV='dev' flag to the eleventy command to enable loading of components direct from the /src directory. This also adds a gulp watcher to rebuild the package css and js files during development. This needs further work! We have three file watchers running in parallel to build/rebuild the docs site in development. (11ty, webpack, and gulp) It would be good if we could use just one! --- .eleventy.js | 2 +- gulpfile.js | 17 +++- package-lock.json | 229 ++++++++++++++++++++++++++++++++++++++++++---- package.json | 1 + 4 files changed, 225 insertions(+), 24 deletions(-) diff --git a/.eleventy.js b/.eleventy.js index 1bf5b81a..348ad38a 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -173,7 +173,7 @@ module.exports = function (eleventyConfig) { // Accepts an Array of file paths or globs (passed to `chokidar.watch`). // Works great with a separate bundler writing files to your output folder. // e.g. `watch: ["_site/**/*.css"]` - watch: [], + watch: ["public/assets/**/*"], // Show local network IP addresses for device testing showAllHosts: true, // Show the dev server version number on the command line diff --git a/gulpfile.js b/gulpfile.js index 95cda2ea..0f3c8ef8 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,15 +3,16 @@ const requireDir = require("require-dir"); requireDir("./gulp"); -gulp.task( - "build:package", - gulp.series( +const buildPackage = gulp.series( "build:clean", "build:copy-files", "build:javascript", "build:javascript-with-jquery", "build:compress-images", - ) + ); + +gulp.task( + "build:package", buildPackage ); gulp.task( @@ -24,3 +25,11 @@ gulp.task( "dist:zip" ) ); + +gulp.task('watch:package', function() { + gulp.watch([ + 'src/moj/components/**/*.scss', + 'src/moj/components/**/*.js' + ], + buildPackage); +}) diff --git a/package-lock.json b/package-lock.json index c3823c97..18e44263 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,8 +19,7 @@ "moment": "^2.29.4", "nunjucks": "^3.2.3", "require-dir": "^1.2.0", - "sass": "^1.50.1", - "tag": "^0.4.17" + "sass": "^1.50.1" }, "devDependencies": { "@babel/core": "^7.14.3", @@ -16406,6 +16405,48 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs": { + "name": "string-width", + "version": "4.2.3", + "dev": true, + "inBundle": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs/node_modules/ansi-regex": { + "version": "5.0.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "dev": true, + "inBundle": true, + "license": "MIT" + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/string-width-cjs/node_modules/strip-ansi": { + "version": "6.0.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi": { "version": "7.1.0", "dev": true, @@ -16421,6 +16462,87 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi-cjs": { + "name": "strip-ansi", + "version": "6.0.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/strip-ansi-cjs/node_modules/ansi-regex": { + "version": "5.0.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs": { + "name": "wrap-ansi", + "version": "7.0.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/ansi-regex": { + "version": "5.0.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/emoji-regex": { + "version": "8.0.0", + "dev": true, + "inBundle": true, + "license": "MIT" + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/string-width": { + "version": "4.2.3", + "dev": true, + "inBundle": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/npm/node_modules/@isaacs/cliui/node_modules/wrap-ansi-cjs/node_modules/strip-ansi": { + "version": "6.0.1", + "dev": true, + "inBundle": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/npm/node_modules/@isaacs/string-locale-compare": { "version": "1.1.0", "dev": true, @@ -19159,7 +19281,6 @@ "name": "string-width", "version": "4.2.3", "dev": true, - "inBundle": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", @@ -19186,7 +19307,6 @@ "name": "strip-ansi", "version": "6.0.1", "dev": true, - "inBundle": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -19413,7 +19533,6 @@ "name": "wrap-ansi", "version": "7.0.0", "dev": true, - "inBundle": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.0.0", @@ -24026,11 +24145,6 @@ "node": ">= 10" } }, - "node_modules/tag": { - "version": "0.4.17", - "resolved": "https://registry.npmjs.org/tag/-/tag-0.4.17.tgz", - "integrity": "sha512-08gff2sbE1YJGZezhSbFLOhjGMeKLso+Mc8MwY0ha4euwXbR8F/6C/7BIA6CCbcc7JvRsi/7HGvsk5lMlwvMYg==" - }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -25804,7 +25918,7 @@ }, "package": { "name": "@ministryofjustice/frontend", - "version": "2.1.2", + "version": "2.1.3", "dev": true, "license": "MIT", "dependencies": { @@ -37847,6 +37961,36 @@ "strip-ansi": "^7.0.1" } }, + "string-width-cjs": { + "version": "npm:string-width@4.2.3", + "bundled": true, + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "bundled": true, + "dev": true + }, + "emoji-regex": { + "version": "8.0.0", + "bundled": true, + "dev": true + }, + "strip-ansi": { + "version": "6.0.1", + "bundled": true, + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } + }, "strip-ansi": { "version": "7.1.0", "bundled": true, @@ -37854,6 +37998,61 @@ "requires": { "ansi-regex": "^6.0.1" } + }, + "strip-ansi-cjs": { + "version": "npm:strip-ansi@6.0.1", + "bundled": true, + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "bundled": true, + "dev": true + } + } + }, + "wrap-ansi-cjs": { + "version": "npm:wrap-ansi@7.0.0", + "bundled": true, + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "dependencies": { + "ansi-regex": { + "version": "5.0.1", + "bundled": true, + "dev": true + }, + "emoji-regex": { + "version": "8.0.0", + "bundled": true, + "dev": true + }, + "string-width": { + "version": "4.2.3", + "bundled": true, + "dev": true, + "requires": { + "emoji-regex": "^8.0.0", + "is-fullwidth-code-point": "^3.0.0", + "strip-ansi": "^6.0.1" + } + }, + "strip-ansi": { + "version": "6.0.1", + "bundled": true, + "dev": true, + "requires": { + "ansi-regex": "^5.0.1" + } + } + } } } }, @@ -39714,7 +39913,6 @@ }, "string-width-cjs": { "version": "npm:string-width@4.2.3", - "bundled": true, "dev": true, "requires": { "emoji-regex": "^8.0.0", @@ -39732,7 +39930,6 @@ }, "strip-ansi-cjs": { "version": "npm:strip-ansi@6.0.1", - "bundled": true, "dev": true, "requires": { "ansi-regex": "^5.0.1" @@ -39927,7 +40124,6 @@ }, "wrap-ansi-cjs": { "version": "npm:wrap-ansi@7.0.0", - "bundled": true, "dev": true, "requires": { "ansi-styles": "^4.0.0", @@ -43335,11 +43531,6 @@ } } }, - "tag": { - "version": "0.4.17", - "resolved": "https://registry.npmjs.org/tag/-/tag-0.4.17.tgz", - "integrity": "sha512-08gff2sbE1YJGZezhSbFLOhjGMeKLso+Mc8MwY0ha4euwXbR8F/6C/7BIA6CCbcc7JvRsi/7HGvsk5lMlwvMYg==" - }, "tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index a03b7488..f5b6a4e2 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "test:sass": "npm install node-sass && node-sass -q gulp/dist-scss/all.scss >/dev/null && echo 'ok'", "test:docs": "npm run build:docs", "watch:11ty": "ENV='dev' eleventy --input=./docs --output=public --serve", + "watch:package": "gulp watch:package", "watch:webpack": "webpack --watch" }, "repository": {