var gulp = require('gulp'),
    fs = require('fs'),
    pug = require('gulp-pug'),
    concatCSS = require('gulp-concat-css'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    autoprefixer = require('gulp-autoprefixer'),
    livereload = require('gulp-livereload'),
    minifyCSS = require('gulp-minify-css'),
    sass = require('gulp-sass'),
    htmlhint = require("gulp-htmlhint"),
    concat = require('gulp-concat'),
    cache = require('gulp-cache'),
    fileSync = require('gulp-file-sync'),
    connect = require('gulp-connect'),
    gutil = require('gulp-util');


gulp.task('connect', function(done){
    connect.server({
        root:'app',
        livereload:true
    });
    done()
});

gulp.task('html', function(){
    gulp.src('./app/**/*.html')
    .pipe(htmlhint())
    .pipe(connect.reload());
});

gulp.task('clear', function(done){
    return cache.clearAll(done);
});

gulp.task('sass', function(){
    return gulp.src('./src/sass/style.sass')
    .pipe(sass().on('error', function(err) {
        const message = err.message || '';
        const errName = err.name || '';
        const codeFrame = err.codeFrame || '';
        gutil.log(gutil.colors.red.bold('[JS babel error]')+' '+ gutil.colors.bgRed(errName));
        gutil.log(gutil.colors.bold('message:') +' '+ message);
        gutil.log(gutil.colors.bold('codeframe:') + '\n' + codeFrame);
        this.emit('end');
    }))
    .pipe(gulp.dest('./app/css'))
    .pipe(connect.reload())
});


gulp.task('pug', function(){
    return gulp.src('./src/pug/index.pug')
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./app/'))
        .pipe(connect.reload());
});

gulp.task('concat', gulp.series('sass', function(done){
    return gulp.src(['./app/css/style.css'])
    .pipe(concat('app.css'))
    .pipe(autoprefixer())
    .pipe(rename('app.min.css'))
    .pipe(gulp.dest('./app/css'))
    .pipe(connect.reload())
    done()
}));

gulp.task('files',  function () {
    var fonts = fileSync('./src/fonts/', './app/css/fonts/', {recursive: true});
     return fileSync('./src/img/', './app/img/', {recursive: true});
})

gulp.task('js', function () {
    return gulp.src('./src/js/*.js')
    .pipe(gulp.dest('./app/js/*.js'))
    .pipe(connect.reload())
});

gulp.task('watch', function(done){
    gulp.watch(['src/sass/*.sass'], gulp.series('clear','sass', 'concat'))
    gulp.watch(['src/js/*.js'], gulp.series('js'))
    gulp.watch(['src/pug/*.pug'], gulp.series('pug'))
    done()
});

gulp.task('default', gulp.series('connect', 'watch', 'pug', 'files', 'sass', 'clear','concat', 'js', function(done) {
    done()
}));