Upgrade to GitHub-native Dependabot

.eslintrc

@@ -4,15 +4,31 @@
         "es6": true
     },
     "plugins": [
-        "import"
+        "import",
+        "react"
     ],
     "settings": {
-        "import/resolver": "node"
+        "import/resolver": {
+            "node": {
+                "paths": ["src/js/modules/"]
+            }
+        },
+        "react": {
+            "version": "999.999.999"
+        }
     },
-    "extends": "eslint:recommended",
+    "extends": [
+        "eslint:recommended",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/react",
+        "plugin:react/recommended",
+        "plugin:prettier/recommended",
+        "prettier"
+    ],
     "parserOptions": {
         "sourceType": "module",
-        "ecmaVersion": "2018"
+        "ecmaVersion": "2020"
     },
     "rules": {
         "array-bracket-spacing": 1,
@@ -68,7 +84,6 @@
         "no-else-return": 2,
         "no-eval": 2,
         "no-extend-native": 2,
-        "no-extra-parens": 2,
         "no-loop-func": 2,
         "no-magic-numbers": [
             2,

.github/dependabot.yml

@@ -0,0 +1,82 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 10
+  ignore:
+  - dependency-name: eslint-plugin-jsdoc
+    versions:
+    - 32.3.1
+    - 32.3.2
+  - dependency-name: gulp-replace
+    versions:
+    - 1.1.0
+    - 1.1.1
+  - dependency-name: postcss
+    versions:
+    - 8.2.10
+    - 8.2.12
+    - 8.2.4
+    - 8.2.5
+    - 8.2.6
+    - 8.2.7
+    - 8.2.8
+    - 8.2.9
+  - dependency-name: eslint-plugin-prettier
+    versions:
+    - 3.3.1
+    - 3.4.0
+  - dependency-name: "@babel/core"
+    versions:
+    - 7.12.10
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.1
+    - 7.13.10
+    - 7.13.13
+    - 7.13.14
+    - 7.13.15
+    - 7.13.8
+  - dependency-name: sinon
+    versions:
+    - 10.0.0
+    - 10.0.1
+    - 9.2.4
+  - dependency-name: "@babel/preset-env"
+    versions:
+    - 7.12.11
+    - 7.12.13
+    - 7.12.16
+    - 7.12.17
+    - 7.13.0
+    - 7.13.10
+    - 7.13.12
+    - 7.13.15
+    - 7.13.5
+    - 7.13.8
+    - 7.13.9
+  - dependency-name: postcss-import
+    versions:
+    - 14.0.0
+    - 14.0.1
+  - dependency-name: autoprefixer
+    versions:
+    - 10.2.3
+    - 10.2.4
+    - 10.2.5
+  - dependency-name: sass
+    versions:
+    - 1.32.5
+    - 1.32.6
+    - 1.32.7
+    - 1.32.8
+  - dependency-name: ini
+    versions:
+    - 1.3.8
+  - dependency-name: prettier
+    versions:
+    - 2.2.1

.gitignore

@@ -31,7 +31,7 @@ npm-debug.log
 
 app/
 deploy/
-src/
+#src/
 dist/
 docs/
 .tmp/compiledHandlebars/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src"]
+	path = src
+	url = [email protected]:scottbert/gulp-handlebars-livereload-src-example.git

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQxuote": true,
+  "tabWidth": 4,
+  "trailingComma": "none",
+  "arrowParens": "avoid"
+}

README.md

@@ -1,25 +1,28 @@
-###How to run this example
+## How to run this example
 
-Requires global gulp and gulp-cli to be installed
+Requires global `gulp` and `gulp-cli` to be installed
 
 Also requires node/npm > 10.x.
 
-If you have homebrew installed on OSX this is as simple as `brew install node`.
+If you have homebrew installed on OSX this is as easy as `brew install node`.
 
 If you don't have homebrew on OSX, visit http://brew.sh
 
-To run the demo, additionally check out https://github.com/scottbert/gulp-handlebars-livereload-src-example then copy into the root of this folder as "src"
+To run the demo, additionally check out https://github.com/scottbert/gulp-handlebars-livereload-src-example then copy into the root of this folder as "src" (This is now included by default as a git submodule)
 
-Do ```npm install```
+NPM pre 7: `npm install` - NPM 7 and above: `npm install --legacy-peer-deps`
 
-Then ```gulp``` to run the livereload local server ( [http://localhost:9000](http://localhost:9000) )
+Then `npm run develop` to run the livereload local server ( [http://localhost:9000](http://localhost:9000) )
 
-```NODE_ENV=production gulp deploy``` to deploy - this puts all of the required files into a 'deploy' directory. You can now put this directory somewhere else and run it.
+```npm run deploy``` to deploy - this puts all of the required files into a `deploy` directory. You can now put this directory somewhere else and run it.
 
-###What this gives you
+### What this gives you
 
 * Everything neatly wrapped in a src folder.
 * Fast build using gulp
 * Linting using eslint and sass-lint
 * Livereload - any change to any of the source files will be almost instantly reflected in a browser
 * Serve to your local network - ```ifconfig``` (or ```ipconfig``` on PC) will tell you your IP address, ```http://<ip address>:9000``` will work on most networks.
+* Static resources precompressed with both brotli and gzip to serve using nginx or apache - [How To Enable GZIP & Brotli Compression for Nginx on Linux](https://computingforgeeks.com/how-to-enable-gzip-brotli-compression-for-nginx-on-linux/) or [Precompress a static website with Brotli and Gzip](https://damien.pobel.fr/post/precompress-brotli-gzip-static-site/) for apache
+* Breakpoints shared between CSS and JS
+* Static resource path versioned and that version number shared between build and Javascript (so you can serve static resources from a CDN and not care about expiry date).

gulpfile.js/CONSTS.js → gulpfile.esm.js/CONSTS.js

@@ -1,55 +1,65 @@
 const fs = require('fs');
-const packageJson = JSON.parse(fs.readFileSync('./package.json'));
 const DEFAULT_PORT = 9000;
 const LIVERELOAD = 35679;
 const HUNDRED = 100;
 const RANDOM_PORT = LIVERELOAD + parseInt(Math.random() * HUNDRED); // Randomize port for livereload.
 const DIST = 'dist';
 
-const OPTIONS = require('../src/options');
+const { name, version } = require('../package.json');
 
-const version = OPTIONS.VERSION || packageJson.version;
-const name = OPTIONS.NAME || packageJson.name;
-const STATIC_ASSETS = `${DIST}/${version}`;
+let OPTIONS = {};
+
+if (!process.env.LIVERELOAD_PORT) {
+    process.env.LIVERELOAD_PORT = RANDOM_PORT;
+}
+
+try {
+    const pth = fs.realpathSync('.');
+
+    OPTIONS = require(pth + '/src/options.js');
+} catch (ex) {} //eslint-disable-line
+
+const STATIC_ASSETS = `${DIST}/${OPTIONS.VERSION || version}`;
 
 const langs = fs.readdirSync('./src/i18n/').map(file => {
     return file.replace('.json', '');
 });
 
-const CONSTS = {
-    BREAKPOINTS: {
-        OLD_MOBILE: 320,
-        MOBILE: 767,
-        SMALL_TABLET: 600,
-        TABLET: 979,
-        SMALL_DESKTOP: 1440
-    },
+const DEFAULTS = {
     BUILD_DIST: 'zip/',
     BUILD_DEST: 'dist/',
-    CSS_DEST_PATH: `${STATIC_ASSETS}/css`,
-    CSS_SRC_PATH: 'src/sass',
+    CSS_DEST: `${STATIC_ASSETS}/css`,
+    SASS_SRC: 'src/sass',
     DATA_SRC: 'src/data',
-    DEPLOY_DEST: `deploy/${name}-${version}`,
+    DEPLOY_TARGET: 'deploy/',
+    DEPLOY_DEST: `deploy/${name}-${OPTIONS.VERSION || version}`,
     DIST_DEST: `${DIST}/`,
     FONT_SRC: 'src/fonts',
     GULP_PORT: process.env.GULP_PORT || DEFAULT_PORT,
     GULP_TASKS: 'gulp-tasks',
-    GULPFILE: 'gulpfile.js',
+    GULPFILE: 'gulpfile.esm.js',
     I18N: 'src/i18n',
-    IMG_DEST: `${STATIC_ASSETS}/images`,
     IMG_SRC: 'src/images',
     JS_DEST: `${STATIC_ASSETS}/js`,
     JS_OUTPUT: '.min.js',
     JS_SRC: 'src/js/',
+    JSON_SRC: 'src/json',
     LANGS: langs,
     LIVERELOAD_PORT: process.env.LIVERELOAD_PORT || RANDOM_PORT,
+    NAME: OPTIONS.NAME || name,
     NODE_ENV: process.env.NODE_ENV,
     SRC: 'src',
     STATIC_PATH: `${STATIC_ASSETS}/`,
-    TEMPLATES_DEST:`${DIST}/`,
-    TEMPLATES_SRC:'src/templates/',
+    TEMPLATES_DEST: `${DIST}/`,
+    TEMPLATES_SRC: 'src/templates/',
     TESTS_PATH: 'src/tests/',
+    VERSION: OPTIONS.VERSION || version,
     VIDEO_SRC: 'src/video'
 };
 
-module.exports = Object.assign(CONSTS, OPTIONS);
+const CONSTS = {
+    ...DEFAULTS,
+    ...OPTIONS
+};
+
+export { CONSTS };

gulpfile.esm.js/brotli.js

@@ -0,0 +1,27 @@
+import { CONSTS } from './CONSTS';
+import { src, dest } from 'gulp';
+import { compress } from 'gulp-brotli';
+import { onError } from 'gulp-notify';
+import gulpPlumber from 'gulp-plumber';
+
+const { DEPLOY_DEST } = CONSTS;
+
+function brotli() {
+    return src(DEPLOY_DEST + '/**/*.{css,svg,js,html}')
+        .pipe(
+            gulpPlumber({
+                errorHandler: onError('brotli Error: <%= error.message %>')
+            })
+        )
+        .pipe(
+            compress({
+                skipLarger: true,
+                mode: 0,
+                quality: 11,
+                lgblock: 0
+            })
+        )
+        .pipe(dest(DEPLOY_DEST));
+}
+
+export { brotli };