const gulp = require('gulp'),
       sass = require('gulp-sass'),
       server = require('browser-sync').create(),
       pug = require('gulp-pug'),
       pugLinter = require('gulp-pug-linter'),
       htmlValidator = require('gulp-w3c-html-validator'),
       autoprefixer = require('gulp-autoprefixer'),
       shorthand = require('gulp-shorthand'),
       cleanCSS = require('gulp-clean-css'),
       sourcemaps = require('gulp-sourcemaps'),
       imagemin = require('gulp-imagemin'),
       plumber = require('gulp-plumber')

function pug2html() {
  return gulp.src('src/pages/*.pug')
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(pugLinter({ reporter: 'default' }))
    .pipe(pug())
    .pipe(htmlValidator())
    .pipe(gulp.dest('build'))
}

function style() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      cascade: false
    }))
    .pipe(shorthand())
    .pipe(cleanCSS({
      compatibility: 'ie8'
    }))
    // .pipe(gulp.dest('./build/css'))
}

function minifyImg() {
  return gulp.src('./src/img/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('build/img'))
}

function serve(cb) {
  server.init({
    server: 'build',
    notify: false,
    open: true,
    cors: true
  })

  gulp.watch('src/img/**/*.{gif,png,jpg,jpeg,svg,webp}', gulp.series(minifyImg)).on('change', server.reload)
  gulp.watch('src/scss/**/*.scss', gulp.series(style, cb =>
    gulp.src('build/css').pipe(server.stream()).on('end', cb)))
  gulp.watch('src/pages/**/*.pug', gulp.series(pug2html))
  gulp.watch('build/*.html').on('change', server.reload)

  return cb()
}

module.exports.start = gulp.series(style, minifyImg,pug2html, serve)