const gulp = require('gulp')

// gulp plugins
const eslint = require('gulp-eslint')
const htmllint = require('gulp-html-linter')
const htmlmin = require('gulp-htmlmin')
const lesshint = require('gulp-lesshint')
const less = require('gulp-less')
const minifyCSS = require('gulp-csso')
const minify = require('gulp-minify')

// htmllint dependencies
const fancyLog = require('fancy-log')
const colors = require('ansi-colors')

// for hot reloading
const browserSync = require('browser-sync').create()

// custom reporter functions
function htmllintReporter(filepath, issues) {
  issues.forEach((issue) =>
    fancyLog(colors.cyan('[gulp-htmllint] ') + colors.white(filepath +
    ' [' + issue.line + ',' + issue.column + ']: ') + colors.red('(' +
    issue.code + ') ' + issue.msg))
  )
}

gulp.task('html', () =>
  gulp.src('src/index.html')
    .pipe(htmllint())
    .pipe(htmllint.format())
    .pipe(htmlmin({
      'collapseWhitespace': true,
      'removeComments': true
    }))
    .pipe(gulp.dest('build'))
)

gulp.task('css', () =>
  gulp.src('src/less/*.less')
    .pipe(lesshint())
    .pipe(lesshint.reporter())
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
)

gulp.task('js', () =>
  gulp.src('src/js/*.js')
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(minify({
      ext:{
          src:'.js',
          min:'.min.js'
      }
    }))
    .pipe(gulp.dest('build/js'))
)

gulp.task('default', [ 'html', 'css', 'js' ])

/* DEVELOPMENT */

gulp.task('browsersync', ['default'], () =>
  browserSync.init({
    server: "./build"
  })
)

gulp.task('html-watch', ['html'], function (done) {
  browserSync.reload()
  done()
})

gulp.task('css-watch', ['css'], function (done) {
  browserSync.reload()
  done()
})

gulp.task('js-watch', ['js'], function (done) {
  browserSync.reload()
  done()
})

gulp.task('watch', ['browsersync'], function(){
  gulp.watch('src/index.html', ['html-watch'])
  gulp.watch('src/less/*.less', ['css-watch'])
  gulp.watch('src/js/*.js', ['js-watch'])
})