Live Reload fails when compiling sass(scss) incorrectly. How to automate the process?

Question

JavaScript

"use strict";

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  watch = require('gulp-watch'),
  browserSync = require('browser-sync').create();

gulp.task('serve', ['sass'], function() {

  browserSync.init({
    server: "./app"
  });

  gulp.watch("app/sass/*.scss", ['sass']);
  gulp.watch("app/*.html").on('change', browserSync.reload);
});


gulp.task('sass', function() {
  return gulp.src("app/sass/*.scss")
    .pipe(sass())
    .pipe(gulp.dest("app/css"))
    .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Answer 1

pipe(
      sass()
      .on('error', sass.logError)
)

Answer 2

"use strict";

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  watch = require('gulp-watch'),
  browserSync = require('browser-sync').create(),
  plumber = require('gulp-plumber');

gulp.task('serve', ['sass'], function() {

  browserSync.init({
    server: "./app"
  });

  gulp.watch("app/sass/*.scss", ['sass']);
  gulp.watch("app/*.html").on('change', browserSync.reload);
});


gulp.task('sass', function() {
  return gulp.src("app/sass/*.scss")
    .pipe(plumber())
    .pipe(sass())
    .pipe(gulp.dest("app/css"))
    .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);