Merge branch 'master' into dev

Author: code-warrior

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["env"]
+  "presets": ["@babel/preset-env"]
 }

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+indent_size = 4

.eslintrc

@@ -0,0 +1,19 @@
+{
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "rules": {
+    "indent": [2, 4, {"SwitchCase": 1}],
+    "quotes": [2, "backtick"],
+    "semi": [2, "always"],
+    "linebreak-style": [2, "unix"],
+    "max-len": [1, 85]
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "extends": "eslint:recommended"
+}

README.md

@@ -1,20 +1,28 @@
 # A Set of Gulp v4.0.0 Tasks for Creating Web Projects Using HTML, CSS/Sass, and JavaScript
 
-(v4.0.1)
+(v4.0.2)
 
 ---
 
 ## Installation
-You need to have Java installed before continuing, as the browser refresh module requires it. Additionally, all the required Node modules need to be installed before you can use this template. From the root folder of this project, type `npm install`. This will create a folder called `node_modules` and download the plugins listed under the `devDependencies` section in the `package.json` file. If you encounter an `ERR!` message about `EACCES`, then you’ll need to run the command as the super user: `sudo npm install`. Because the Gulp tasks amount to about 112MB, expect to wait.
+Before continuing, make sure Java is installed, as the browser refresh module requires it. Additionally, all the required Node modules need to be installed before you can use this template. From the root folder, type `npm install`. This will create a folder called `node_modules` and download the plugins listed under the `devDependencies` section in the `package.json` file. If you encounter an `ERR!` message about `EACCES` on macOS, then run the command as the super user: `sudo npm install`.
 
 ## Tasks
-Typing `gulp --tasks`, or simply `gulp`, will provide you with a list of tasks included in `gulpfile.js`. Tasks such as `build` and `serve` invoke other tasks and are nested in the output of `gulp --tasks` and are executed in `<series>`.
+Typing `gulp --tasks`, or simply `gulp`, will render a list of tasks included in `gulpfile.js`. Tasks such as `build` and `serve` invoke other tasks and are executed in `<series>`.
 
 Each task can be run on its own. For example, if all you want to do is validate your HTML, you can type `gulp validateHTML`.
 
 ## Running the Project
-All your work must be added to the sub-folders under the `dev` folder: your markup in `html`, your Sass/CSS in `styles`, your JavaScript in `scripts`, and your images in `img`.
+All your work must be added to the sub-folders under the `dev` folder: your markup in `html`, your Sass/CSS in `styles`, your JavaScript in `scripts`, and, your images in `img`.
 
 During development, run `gulp serve`, which runs multiple development-related tasks, then launches your default browser and reloads on file changes.
 
 For production-ready projects, run `build`, which creates a folder called `prod`. This is the folder you’d upload to your server if you were going live with your project.
+
+## Issues
+As of this writing, 14 Oct 2021, you’ll need to have [`stylelint` installed](https://stylelint.io/user-guide/get-started) to run `gulp-stylelint`, which is included in a task called `lintCSS`. However, there’s a bug in this project that, when adding the following to the `serve` task, the browser won’t reload on changes to CSS files.
+
+```javascript
+watch(`dev/styles/**/*.css`, lintCSS)
+    .on(`change`, reload);
+```

dev/scripts/app.js

@@ -1,7 +1,4 @@
-/*jslint browser, es6 */
-/*global window */
-
-window.onload = function () {
+window.onload = () => {
     const CSSPreProcessor = `Sass`;
     const JSVersion = `ES6`;