const { src, dest, watch, series } = require('gulp')
const pug = require('gulp-pug')
const sass = require('gulp-sass')(require('sass'))
const bs = require('browser-sync').create()
const fs = require('fs')
const helper = require('./theme/helper.js');

function css () {
  return src('./theme/styles.scss')
    .pipe(sass())
    .pipe(dest('./theme'))
}

function html () {
  const resume = JSON.parse(fs.readFileSync('./resume.json', 'utf-8'))

  return src('./theme/template.pug')
    .pipe(pug({ data: { resume, helper } }))
    .pipe(dest('./public'))
}

function serve () {
  bs.init({
    server: {
      baseDir: './public',
      index: 'template.html'
    },
    ui: false,
    open: false
  })

  watch('./theme/**/*.scss', series(css, html))
  watch(['./theme/**/*.pug', './resume.json'], html)
  bs.watch('./public/*.html').on('change', bs.reload)
}

exports.css = css
exports.default = series(css, html, serve)