make sass errors clearer to the user

gulp/sass.js

@@ -13,6 +13,7 @@ const fs = require('fs')
 
 const extensions = require('../lib/extensions/extensions')
 const config = require('./config.json')
+const stylesheetDirectory = config.paths.public + 'stylesheets'
 
 gulp.task('sass-extensions', function (done) {
   const fileContents = '$govuk-extensions-url-context: "/extension-assets"; ' + extensions.getFileSystemPaths('sass')
@@ -21,12 +22,20 @@ gulp.task('sass-extensions', function (done) {
   fs.writeFile(path.join(config.paths.lib + 'extensions', '_extensions.scss'), fileContents, done)
 })
 
-gulp.task('sass', function () {
+gulp.task('sass', function (done) {
   return gulp.src(config.paths.assets + '/sass/*.scss')
     .pipe(sourcemaps.init())
-    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
+    .pipe(sass({ outputStyle: 'expanded' }).on('error', function (error) {
+      // write a blank application.css to force browser refresh on error
+      if (!fs.existsSync(stylesheetDirectory)) {
+        fs.mkdirSync(stylesheetDirectory)
+      }
+      fs.writeFileSync(path.join(stylesheetDirectory, 'application.css'), '')
+      console.error('\n', error.messageFormatted, '\n')
+      this.emit('end')
+    }))
     .pipe(sourcemaps.write())
-    .pipe(gulp.dest(config.paths.public + '/stylesheets/'))
+    .pipe(gulp.dest(stylesheetDirectory))
 })
 
 gulp.task('sass-documentation', function () {

start.js

@@ -68,7 +68,7 @@ function runGulp () {
   const spawn = require('cross-spawn')
 
   process.env.FORCE_COLOR = 1
-  var gulp = spawn('./node_modules/.bin/gulp')
+  var gulp = spawn('./node_modules/.bin/gulp', ['--log-level', '-L'])
   gulp.stdout.pipe(process.stdout)
   gulp.stderr.pipe(process.stderr)
   process.stdin.pipe(gulp.stdin)