var gulp        = require('gulp');
var browserSync = require('browser-sync');
var sass        = require('gulp-sass');
var sourcemaps  = require('gulp-sourcemaps');
var plumber     = require('gulp-plumber');
var notify      = require("gulp-notify");

var reload      = browserSync.reload;


gulp.task('browser-sync', function() {
    browserSync({
        proxy: "local.wp-test.com"
    });
});


var onError = notify.onError({
      title:    '‼️ SCSS ERROR ‼️',
      subtitle: '<%= error.file %>',
      message:  '<%= error.message %>',
      contentImage: './gulp-files/sass.png',
      sound: "Sosumi",
      icon: './gulp-files/sass.png',
      appIcon: './gulp-files/sass.png'   
    });


gulp.task('sass', function () {
    return gulp.src('wp-content/themes/timber/stylesheets/scss/**/*.scss')
        .pipe(plumber({errorHandler: onError}))
        .pipe(sourcemaps.init())
        .pipe(sass())                                 // Compile SCSS 
        .pipe(sourcemaps.write())                     // Write Sourcemaps
        .pipe(plumber.stop())
        .pipe(gulp.dest('wp-content/themes/timber/stylesheets/css'))    // Save CSS file
        .pipe(reload({stream:true}));                 // Reload browsers
});


// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
    gulp.watch("wp-content/themes/timber/stylesheets/scss/**/*.scss", ['sass']);
    gulp.watch("wp-content/themes/timber/**/*.html").on('change', reload);
    gulp.watch("wp-content/themes/timber/**/*.twig").on('change', reload);
    gulp.watch("wp-content/themes/timber/js/**/*.js").on('change', reload);
});
