Fixed: Errors in JS file (in src dir) crash the server while “build” process.

package-lock.json

@@ -28,6 +28,7 @@
 				"mem-fs-editor": "^9.5.0",
 				"node-fetch": "^3.2.10",
 				"open": "^8.4.0",
+				"plugin-error": "^2.0.0",
 				"sanitize-html": "^2.7.1",
 				"sass": "^1.50.1",
 				"yeoman-environment": "^3.10.0",
@@ -5497,6 +5498,20 @@
 				"@babel/core": "^7.0.0"
 			}
 		},
+		"node_modules/gulp-babel/node_modules/plugin-error": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+			"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+			"dependencies": {
+				"ansi-colors": "^1.0.1",
+				"arr-diff": "^4.0.0",
+				"arr-union": "^3.1.0",
+				"extend-shallow": "^3.0.2"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/gulp-cli": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.3.0.tgz",
@@ -5717,6 +5732,20 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/gulp-sass/node_modules/plugin-error": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+			"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+			"dependencies": {
+				"ansi-colors": "^1.0.1",
+				"arr-diff": "^4.0.0",
+				"arr-union": "^3.1.0",
+				"extend-shallow": "^3.0.2"
+			},
+			"engines": {
+				"node": ">= 0.10"
+			}
+		},
 		"node_modules/gulp-sass/node_modules/replace-ext": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
@@ -9400,17 +9429,14 @@
 			}
 		},
 		"node_modules/plugin-error": {
-			"version": "1.0.1",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-2.0.0.tgz",
-			"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+			"integrity": "sha512-o4bwIOmuFwUg2MU6xt7plGEQY3YyENx6kvwaFZBrUpamA91FdS9w3U+pU0y4OuDoBQe+jf3RLGSfQebSRBEVsQ==",
 			"dependencies": {
-				"ansi-colors": "^1.0.1",
+				"ansi-colors": "^1.0.1"
-				"arr-diff": "^4.0.0",
-				"arr-union": "^3.1.0",
-				"extend-shallow": "^3.0.2"
 			},
 			"engines": {
-				"node": ">= 0.10"
+				"node": ">=10.13.0"
 			}
 		},
 		"node_modules/portscanner": {
@@ -16952,6 +16978,19 @@
 				"replace-ext": "^1.0.0",
 				"through2": "^2.0.0",
 				"vinyl-sourcemaps-apply": "^0.2.0"
+			},
+			"dependencies": {
+				"plugin-error": {
+					"version": "1.0.1",
+					"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+					"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+					"requires": {
+						"ansi-colors": "^1.0.1",
+						"arr-diff": "^4.0.0",
+						"arr-union": "^3.1.0",
+						"extend-shallow": "^3.0.2"
+					}
+				}
 			}
 		},
 		"gulp-cli": {
@@ -17134,6 +17173,17 @@
 				"vinyl-sourcemaps-apply": "^0.2.1"
 			},
 			"dependencies": {
+				"plugin-error": {
+					"version": "1.0.1",
+					"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+					"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+					"requires": {
+						"ansi-colors": "^1.0.1",
+						"arr-diff": "^4.0.0",
+						"arr-union": "^3.1.0",
+						"extend-shallow": "^3.0.2"
+					}
+				},
 				"replace-ext": {
 					"version": "2.0.0",
 					"resolved": "https://registry.npmjs.org/replace-ext/-/replace-ext-2.0.0.tgz",
@@ -19905,14 +19955,11 @@
 			}
 		},
 		"plugin-error": {
-			"version": "1.0.1",
+			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-1.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/plugin-error/-/plugin-error-2.0.0.tgz",
-			"integrity": "sha512-L1zP0dk7vGweZME2i+EeakvUNqSrdiI3F91TwEoYiGrAfUXmVv6fJIq4g82PAXxNsWOp0J7ZqQy/3Szz0ajTxA==",
+			"integrity": "sha512-o4bwIOmuFwUg2MU6xt7plGEQY3YyENx6kvwaFZBrUpamA91FdS9w3U+pU0y4OuDoBQe+jf3RLGSfQebSRBEVsQ==",
 			"requires": {
-				"ansi-colors": "^1.0.1",
+				"ansi-colors": "^1.0.1"
-				"arr-diff": "^4.0.0",
-				"arr-union": "^3.1.0",
-				"extend-shallow": "^3.0.2"
 			}
 		},
 		"portscanner": {

package.json

@@ -36,6 +36,7 @@
 		"mem-fs-editor": "^9.5.0",
 		"node-fetch": "^3.2.10",
 		"open": "^8.4.0",
+		"plugin-error": "^2.0.0",
 		"sanitize-html": "^2.7.1",
 		"sass": "^1.50.1",
 		"yeoman-environment": "^3.10.0",

server.js

@@ -21,6 +21,7 @@ import sanitizeHtml from 'sanitize-html';
 import {escape} from "lodash-es";
 import archiver from 'archiver';
 import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js";
+import PluginError from 'plugin-error';
 
 /**
  * Constants
@@ -28,10 +29,6 @@ import {getBlockConfigs, getConfigs, readJSONFile} from "./helpers.js";
 
 const {isDev, modulesPath, projectPath, developmentBlockName} = getConfigs();
 const blocksRegistry = isDev ? 'http://localhost:3020' : 'https://axe-web-blocks-registry.captain.devdevdev.life';
-const sass = gulpSass(dartSass);
-
-buildStyleFiles()
-buildScriptFiles()
 
 /**
  * Init server
@@ -41,6 +38,7 @@ let port = 3000; // This variable is used in `*.hbs` and it will be updated once
 let previewFrameUrl = `http://localhost:${port}`; // This variable is used in `*.hbs` and it will be updated once BrowserSync is ready.
 const dataFiles = prepareListOfDataFiles(await fs.readdir(path.join(projectPath, 'data')));
 const app = express();
+const sass = gulpSass(dartSass);
 
 const hbs = create({
   extname: '.hbs', defaultLayout: false, partialsDir: ['.'], helpers: {
@@ -173,6 +171,9 @@ app.use(express.static(path.join(projectPath, 'src')));
 app.use(express.static(path.join(projectPath, 'design')));
 app.use(express.static(path.join(modulesPath, 'layouts')));
 
+// Setup Gulp
+await buildAssetFiles();
+
 // BrowserSync
 const bsOptions = await startBrowserSync();
 port = bsOptions.port;
@@ -212,12 +213,12 @@ function startBrowserSync() {
       const bs = browserSync.create();
 
       const files = getJSBundleFiles();
-      gulp.watch(files, {delay: 400}, gulp.series([buildScriptFiles, function (cb) {
+      gulp.watch(files, {delay: 400}, gulp.series(['build-script-files', function (cb) {
         browserSyncReload(bs, 'js', 'Script Files Change');
         return cb();
       }]));
 
-      gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series([buildStyleFiles, function (cb) {
+      gulp.watch(path.join(projectPath, 'src/**/*.scss'), {delay: 400}, gulp.series(['build-styling-files', function (cb) {
         browserSyncReload(bs, 'css', 'Style Files Change');
         return cb();
       }]));
@@ -263,11 +264,14 @@ function getJSBundleFiles() {
   return [path.join(projectPath, 'src/**/*.js'), path.join(projectPath, 'src/**/*.mjs'), '!' + path.join(projectPath, 'src/**/*.min.js')];
 }
 
-function buildScriptFiles() {
+function buildScriptFiles(done) {
   const files = getJSBundleFiles();
   return gulp.src(files)
     .pipe(sourcemaps.init({}))
-    .pipe(babel())
+    .pipe(babel()).on('error', function (error) {
+      showError(new PluginError('JavaScript', error).toString());
+      done();
+    })
     .pipe(gulp.src(path.join(projectPath, 'vendor/*.js')))
     // .pipe(gulp.dest('src/'))
     .pipe(uglify())
@@ -276,16 +280,40 @@ function buildScriptFiles() {
     .pipe(gulp.dest(path.join(projectPath, 'src/')));
 }
 
-function buildStyleFiles() {
+function buildStyleFiles(done) {
   return gulp.src(path.join(projectPath, 'src/**/*.scss'))
     .pipe(sourcemaps.init({}))
-    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
+    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', function (error) {
+      showError(new PluginError('SCSS', error.messageFormatted).toString());
+      // sass.logError(error);
+      done();
+    }))
     // .pipe(gulp.dest('src/'))
     .pipe(rename({extname: '.min.css'}))
     .pipe(sourcemaps.write('.', {}))
     .pipe(gulp.dest(path.join(projectPath, 'src')))
 }
 
+function buildAssetFiles() {
+  // Register tasks.
+  gulp.task('build-script-files', buildScriptFiles);
+  gulp.task('build-styling-files', buildStyleFiles);
+
+  // Run first build.
+  return new Promise((resolve) => {
+    gulp.series('build-script-files', 'build-styling-files', function (cb) {
+      resolve();
+    })();
+  });
+}
+
+function showError(errorMessage) {
+  console.log(errorMessage);
+
+  // TODO: Send this message to browser.
+  // So the developer can understand there is an error.
+}
+
 function prepareListOfDataFiles(dataFiles) {
   return dataFiles
     .filter((fileName) => fileName.split('.').pop() === 'json')