var gulp        = require('gulp');
var sass        = require("gulp-ruby-sass");
var filter      = require('gulp-filter');
var browserSync = require('browser-sync');
var sourcemaps  = require('gulp-sourcemaps');

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

gulp.task('sass', function() {
  return sass('./scss', {sourcemap: true})
    .pipe(browserSync.reload({stream:true}))
    .on('error', function (err) {
      console.error('Error!', err.message);
    })
    .pipe(sourcemaps.write('maps', {
        includeContent: false,
        sourceRoot: './css'
    }))
    .pipe(gulp.dest('./css'));
});

gulp.task('bs-reload', function () {
    browserSync.reload();
});

// Watch scss AND html files, doing different things with each.
gulp.task('default', ['browser-sync'], function () {
  gulp.watch("scss/*.scss", ['sass']);
  gulp.watch("**/*.html", ['bs-reload']);
});