const gulp = require('gulp');

const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const useref =require('gulp-useref');
// to filter the content
const gulpIf = require('gulp-if');
// to remove files
const del = require('del');
const postcss      = require('gulp-postcss');
const sourcemaps   = require('gulp-sourcemaps');
const autoprefixer = require('autoprefixer');
var babel = require("gulp-babel");
let imagemin = require('gulp-imagemin');
let pngquant = require('imagemin-pngquant');




gulp.task('browserSync', function(done) {
    browserSync.init({
        server: {baseDir: './'},
    });
    done();
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return (gulp.src('css/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass()).on('error', sass.logError)
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.stream())
    )
});

gulp.task('default', gulp.series('browserSync', function watching () {
    gulp.watch('css/*.scss').on('change', gulp.series('sass'));
    gulp.watch('css/*.css').on('change', browserSync.reload);
    gulp.watch('index.html').on('change', browserSync.reload);
    //gulp.watch('index.html', browserSync.reload);// reloads only once
    gulp.watch('js/*.js').on('change', browserSync.reload);
    gulp.watch('img/').on('change', browserSync.reload);
}))

gulp.task('combi', function() {
    return gulp.src('index.html')
        .pipe(useref())
        .pipe(gulpIf('*.js', babel()))
        .pipe(gulpIf('*.css', postcss([ autoprefixer() ])))
        .pipe(gulp.dest('dist/'))
});
gulp.task('img', function () {
    return gulp.src('img/*')
      .pipe(imagemin([
        imagemin.svgo(),
        pngquant({
            quality: [0.7, 0.9],
            speed: 1,
            dithering: 0.5
        })
      ]))

      .pipe(gulp.dest('dist/img'));

  });

gulp.task('clean:dist', function(){
    return del(['dist']).then(paths => {
           console.log('Deleted files and folders:\n', paths.join('\n'));
    });
});

gulp.task('fonts', function() {
    return gulp.src('fonts/*').pipe(gulp.dest('dist/fonts'));
})

gulp.task('build', gulp.series('clean:dist', 'sass', gulp.parallel('combi', 'img', 'fonts'))
);