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

gulp.task('sass', function () {
  return gulp
    .src('scss/main.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({errLogToConsole: true, outputStyle: 'expanded'}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({stream: true}))
})

gulp.task('browser-sync', ['sass'], function() {
  browserSync.init({
      server: {
          baseDir: "./"
      }
  });
});

gulp.task('watch', ['browser-sync'], function () {
  gulp.watch("scss/*.scss", ['sass']);
  gulp.watch("*.html").on('change', browserSync.reload);
});

// gulp.task('watch', function () {
//   gulp.watch('scss/**/*.scss', ['sass']);
// })