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


gulp.task('serve', ['sass'], function() {
    browserSync.init({
        server: "./",
    });
    gulp.watch("scss/*.scss", ['sass']);
    gulp.watch("./*.html").on('change', browserSync.reload);
});

gulp.task('sass', function() {
    return gulp.src("scss/*.scss")
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'nested',
    }).on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions', 'ie >= 9', 'Android >= 2.3', 'Firefox >= 14']
    }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest("css"))
    .pipe(browserSync.stream());
});

//Compress SCSS File
gulp.task('minify-css', function() {
    return gulp.src("scss/*.scss")
    .pipe(sass({
        outputStyle: 'compressed',
    }).on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions', 'ie >= 9', 'Android >= 2.3', 'Firefox >= 14']
    }))
    .pipe(gulp.dest("css"))
});

//Watch For changes
gulp.task('watch', ['serve']);
gulp.task('default', ['serve']);