Gulpfile with Webpack and SCSS watch

gulpfile.js

// Essentials
var gulp = require('gulp');
var webpack = require('webpack');               // Include webpack to add definePlugin
var webpackStream = require('webpack-stream');  // Use webpack-stream to compile

// Sass Requires
var sass = require('gulp-sass');                // Include SASS
var autoprefix = require('gulp-autoprefixer');  // Autoprefixer (always)
var rename = require('gulp-rename');            // Gulp Rename
var sourcemaps = require('gulp-sourcemaps');    // Sourcemaps (for sass)

// Utilities
var gutil = require('gulp-util');
var chalk = require('chalk');
var notify = require('gulp-notify');
var livereload = require('gulp-livereload');

// Webpack config
var config = require('./webpack.config.js')

// Global Default Configs
config.watch    = true;
config.progress = true;
config.devtool  = 'cheap-module-eval-source-map';
config.plugins  = [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': '"development"'
  })
];

// Gulp Default Task
gulp.task('default', ['watch', 'webpack', 'scss']);

// Gulp Webpack Compiler
gulp.task('webpack', function() {
  // Run Webpack
  return gulp.src('./app/app.js')
    .pipe(webpackStream(config))      // Load Webpack config
    .on('error', function(error) {    // Error reporting
      notify().write({
        message: error.message
      });
      this.emit('end'); /* Allow Webpack to continue watching on error */
    })
    .pipe(gulp.dest('./app/dist/'))
    .pipe(notify({                    // Notifiy me when the file is built
      title:   'Webpack',
      message: 'Generated file: <%= file.relative %>',
    }))
    .pipe(livereload()); // Run livereload
});

// Gulp SCSS
gulp.task('scss', function(){
  notify().write('Compiling Sass'); 
  return gulp.src('./app/stylesheets/layout.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
        style: 'compressed'
      }).on('error', function(error) {            // Error reporting that won't stop your watch task
        gutil.log(chalk.yellow(error.message));
        notify().write({
          message: error.message
        });
        this.emit('end');
      })
    )
    .pipe(autoprefix('last 2 versions'))          // Autoprefix for the latest 2 browsers
    .pipe(rename('layout.css'))                   // Rename our file
    .pipe(sourcemaps.write('./'))                 // Write a sourcemap
    .pipe(gulp.dest('./app/dist'))                // Save to the dist directory
    .pipe(notify({                                // Tell me everything is 👌
      title:   'Sass',
      message: 'Generated file: <%= file.relative %>',
    }));
});

// Gulp Watch Setup for LiveReload
gulp.task('watch', function() {
  livereload.listen(); // Starts livereload
  gulp.watch(['./app/stylesheets/**/*.scss'], ['scss']);  // Watch my SCSS files
  gulp.watch(['./app/build/layout.css'], function(file){  // Livereload after layout.css has updated
    livereload.changed(file)
  });
});