let gulp = require('gulp');
let sass = require('gulp-sass');
let browserSync = require('browser-sync');

gulp.task('styles', function() {
  return gulp.src('app/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css')) //removed semicolon
    .pipe(browserSync.reload({ stream:true }));
});

// watch Sass files for changes, run the Sass preprocessor with the 'sass' task and reload
gulp.task('serve', gulp.series('styles', function() {
  browserSync({
    server: {
      baseDir: './app'
    }
  });

  gulp.watch('app/scss/*.scss', gulp.series('styles'));
  gulp.watch('app/css/*.css', browserSync.reload);
  gulp.watch('app/**/*.html', browserSync.reload)
}));