Watch and compile Sass with notifications on error; Serve generated files independently using BrowserSync;

gulpfile.js

var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync').create();
var gulp = require('gulp');
var gulpIf = require('gulp-if');
var notify = require('gulp-notify');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('build:css', buildCss);
gulp.task('serve', serveTask);
gulp.task('watch', watchTask);

var isWatching = false;

function buildCss() {
    return gulp.src('src/index.scss')
        .pipe(sourcemaps.init())
        .pipe(gulpIf(isWatching, plumber({
            errorHandler: notify.onError(function formatErrorAsNotification(err) {
                return err.message
                    .replace(/.*(\/.*\.scss)/, '.. $1')
                    .replace('\n', ': ');
            })
        })))
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(autoprefixer({browsers: ['> 1%', 'last 2 versions']}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest('dist/'));
}

function serveTask() {
    return browserSync.init({
        files: ['dist/**/*'],
        online: false,
        server: {
            baseDir: 'dist'
        },
        ui: false
    });
}

function watchTask() {
    isWatching = true;
    gulp.watch('src/**/*.scss', ['build:css']);
}