var gulp = require('gulp'),
		minCSS = require('gulp-clean-css'),
		browserSync = require('browser-sync').create(),
		sass = require('gulp-compass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./app"
    });

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

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
  gulp.src('app/sass/*.scss')
    .pipe(sass({
      config_file: 'app/config.rb',
      css: 'app/css',
      sass: 'app/sass',
      image: 'app/img'
    }))
    /*.on('error', function(error) {
      // Would like to catch the error here
      console.log(error);
      this.emit('end');
    })*/
    .pipe(minCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('app/dist/css'))
    .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);