const {watch, src, dest, series, parallel} = require('gulp')
const path = require('path')
const concat = require('gulp-concat')
const rename = require('gulp-rename')
const sourcemaps = require('gulp-sourcemaps')
const sass = require('gulp-dart-sass')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')

let source_dir = 'assets'
let output_dir = 'public/assets'

function js(done) {
  return src(path.join(source_dir, 'js', '*.js'))
    .pipe(concat('main.js'))
    .pipe(dest(path.join(output_dir, 'scripts')))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(babel())
    .pipe(uglify())
    .pipe(rename('main.min.js'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(dest(path.join(output_dir, 'scripts')))
}

function css(done) {
  return src([path.join(source_dir, 'sass', '*.scss'), path.join(source_dir, 'sass', '*.sass')])
    .pipe(sass())
    .pipe(rename('main.css'))
    .pipe(dest(path.join(output_dir, 'styles')))
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(rename('main.min.css'))
    .pipe(sourcemaps.write('./maps'))
    .pipe(dest(path.join(output_dir, 'styles')))
}

function html(done) {
  return src(path.join(source_dir, '*.html'))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(rename('index.html'))
    .pipe(dest(path.join(output_dir, '../')))
}

watch(source_dir, parallel(js, css, html))

exports.default = parallel(js, css, html)