const { series, parallel, src, dest, watch } = require('gulp');
const pug = require('gulp-pug');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const gulpif = require('gulp-if');
const autoprefixer = require('gulp-autoprefixer');
const pxtorem = require('gulp-pxtorem');
const browserSync = require('browser-sync');
const babel = require('gulp-babel');
const imagemin = require('gulp-imagemin');

const server = browserSync.create();

var prod = process.env.NODE_ENV === 'prod';

function html() {
  return src('src/index.pug')
    .pipe(pug())
    .pipe(dest('dist'));
}

function css() {
  return src('src/scss/styles.scss')
    .pipe(sass())
    .pipe(gulpif(prod, cssnano()))
    .pipe(
      gulpif(
        prod,
        autoprefixer({
          browsers: ['last 2 versions'],
        })
      )
    )
    .pipe(pxtorem({ replace: false }))
    .pipe(dest('dist/css'));
}

function js() {
  return src('src/js/script.js')
    .pipe(
      babel({
        presets: ['@babel/env'],
      })
    )
    .pipe(dest('dist/js'));
}

function images() {
  return src('src/img/**/*')
    .pipe(gulpif(prod, imagemin()))
    .pipe(dest('dist/img'));
}

function reload(done) {
  server.reload();
  done();
}

function serve(done) {
  server.init({
    server: {
      baseDir: './dist',
    },
  });
  done();
}

exports.dev = series(parallel(html, css, js, images), serve, () =>
  watch(['src/scss/**/*.scss'], series(parallel(html, css, js, images), reload))
);
exports.build = parallel(html, css, js, images);