Allow Sass compilation to restart after gulp dev errors

package.json

@@ -61,6 +61,7 @@
     "minimatch": "^5.1.0",
     "node-sass": "^8.0.0",
     "nunjucks": "^3.2.3",
+    "plugin-error": "^2.0.0",
     "postcss": "^8.4.19",
     "postcss-pseudo-classes": "^0.2.1",
     "postcss-scss": "^4.0.5",

tasks/gulp/compile-assets.mjs

@@ -12,12 +12,13 @@ import uglify from 'gulp-uglify'
 import merge from 'merge-stream'
 import minimatch from 'minimatch'
 import nodeSass from 'node-sass'
+import PluginError from 'plugin-error'
 import slash from 'slash'
 
 import configPaths from '../../config/paths.js'
 import { getListing } from '../../lib/file-helper.js'
 import { componentNameToJavaScriptModuleName } from '../../lib/helper-functions.js'
-import { destination, isDist, isPackage } from '../task-arguments.mjs'
+import { destination, isDev, isDist, isPackage } from '../task-arguments.mjs'
 
 const sass = gulpSass(nodeSass)
 
@@ -83,7 +84,23 @@ compileStylesheets.displayName = 'compile:scss'
 function compileStylesheet (stream, options = {}) {
   return stream
     .pipe(plumber())
-    .pipe(sass(options))
+
+    // Compile Sass to CSS
+    .pipe(sass(options).on('error', (error) => {
+      if (!isDev) {
+        error.showProperties = false
+        error.showStack = false
+
+        // Gulp exit (on error)
+        return stream.emit('error', error)
+      }
+
+      // Gulp continue (on error) via `gulp dev`
+      console.error(new PluginError('sass', error.messageFormatted).toString())
+      return stream.emit('end')
+    }))
+
+    // Apply PostCSS (autoprefixer etc)
     .pipe(postcss())
 }
 

tasks/task-arguments.mjs

@@ -35,3 +35,4 @@ export const destination = destPath
 export const isPackage = target === 'package'
 export const isPublic = target === 'public'
 export const isDist = target === 'dist'
+export const isDev = isPublic && tasks.includes('dev')