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)
  });
});

Can we leave the js watch to webpack since it's available now? We only have to trigger webpack watch from gulp? Gulp watch together with webpack build is really slow on big projects.

Can we leave the js watch to webpack since it's available now? We only have to trigger webpack watch from gulp? Gulp watch together with webpack build is really slow on big projects.

Documentation says that if you pass a webpack compiler object as a second argument to webpackStream, it will be cached and recompiles will run faster.