show build errors in browser

gulpfile.babel.js

@@ -17,8 +17,10 @@ import source from 'vinyl-source-stream';
 import subdir from 'subdir';
 import vinylBuffer from 'vinyl-buffer';
 import watchify from 'watchify';
+import AnsiToHTML from 'ansi-to-html';
 
 const $ = require('auto-plug')('gulp');
+const ansiToHTML = new AnsiToHTML();
 
 const AUTOPREFIXER_BROWSERS = [
   'ie >= 8',
@@ -56,7 +58,9 @@ function getBundlers(useWatchify) {
 
       execute: function () {
         var stream = this.b.bundle()
-          .on('error', $.util.log.bind($.util, 'Browserify error'))
+          .on('error', function (error) {
+            handleBuildError.call(this, 'Error building JavaScript', error);
+          })
           .pipe(source(entry.replace(/\.js$/, '.bundle.js')));
 
         // skip sourcemap creation if we're in 'serve' mode
@@ -81,7 +85,7 @@ function getBundlers(useWatchify) {
       bundler.b = watchify(bundler.b);
       bundler.b.on('update', function (files) {
         // re-run the bundler then reload the browser
-        bundler.execute().on('end', browserSync.reload);
+        bundler.execute().on('end', reload);
 
         // also report any linting errors in the changed file(s)
         gulp.src(files.filter(file => subdir(path.resolve('client'), file))) // skip bower/npm modules
@@ -157,7 +161,6 @@ gulp.task('serve', ['download-data', 'styles'], function (done) {
   initialBundles.on('end', function () {
     // use browsersync to serve up the development app
     browserSync({
-      notify: false,
       server: {
         baseDir: ['.tmp', 'client'],
         routes: {
@@ -167,11 +170,11 @@ gulp.task('serve', ['download-data', 'styles'], function (done) {
     });
 
     // refresh browser after other changes
-    gulp.watch(['client/styles/**/*.{scss,css}'], ['styles', 'scsslint', browserSync.reload]);
-    gulp.watch(['client/images/**/*'], browserSync.reload);
+    gulp.watch(['client/styles/**/*.{scss,css}'], ['styles', 'scsslint', reload]);
+    gulp.watch(['client/images/**/*'], reload);
 
     gulp.watch(['./client/**/*.hbs', 'client/words.json'], () => {
-      runSequence('templates', browserSync.reload);
+      runSequence('templates', reload);
     });
 
     runSequence('templates', done);
@@ -199,7 +202,11 @@ gulp.task('scripts', () => mergeStream([
 // builds stylesheets with sass/autoprefixer
 gulp.task('styles', () => gulp.src('client/**/*.scss')
   .pipe($.sourcemaps.init())
-  .pipe($.sass({includePaths: 'bower_components'}).on('error', $.sass.logError))
+  .pipe($.sass({includePaths: 'bower_components'})
+    .on('error', function (error) {
+      handleBuildError.call(this, 'Error building Sass', error);
+    })
+  )
   .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
   .pipe($.sourcemaps.write('./'))
   .pipe(gulp.dest('.tmp'))
@@ -373,3 +380,31 @@ gulp.task('templates', () => {
   const thanksPageTemplate = Handlebars.compile(fs.readFileSync('client/thanks-page.hbs', 'utf8'));
   fs.writeFileSync(`.tmp/thanks.html`, thanksPageTemplate());
 });
+
+// helpers
+let preventNextReload; // hack to keep a BS error notification on the screen
+function reload() {
+  if (preventNextReload) {
+    preventNextReload = false;
+    return;
+  }
+
+  browserSync.reload();
+}
+
+function handleBuildError(headline, error) {
+  if (env === 'development') {
+    // show in the terminal
+    $.util.log(headline, error && error.stack);
+
+    // report it in browser sync
+    let report = `<span style="color:red;font-weight:bold;font:bold 20px sans-serif">${headline}</span>`;
+    if (error) report += `<pre style="text-align:left;max-width:800px">${ansiToHTML.toHtml(error.stack)}</pre>`;
+    browserSync.notify(report, 60 * 60 * 1000);
+    preventNextReload = true;
+
+    // allow the sass/js task to end successfully, so the process can continue
+    this.emit('end');
+  }
+  else throw error;
+}

package.json

@@ -1,5 +1,6 @@
 {
   "devDependencies": {
+    "ansi-to-html": "^0.3.0",
     "auto-plug": "^1.2.0",
     "babel-core": "^6.1.21",
     "babel-eslint": "^4.1.3",