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

// Compile Sass + refresh browser sync
gulp.task('styles', function() {
  return gulp.src('./sass/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('./css'))
      .pipe(browserSync.stream());
});

// Launch a quick server
gulp.task('browserSync', function() {
  browserSync.init({
    server: {
      baseDir: './'
    }
  });
});

// Static Server + watching scss/html files
gulp.task('serve', ['styles'], function() {

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

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

// Watch task = updates SASS and refreshes Browser Sync
gulp.task('default', ['serve']);