gulpfile.js

const { series, parallel, src, dest } = require('gulp')
const { sync } = require('glob')
const sass = require('gulp-sass')
const { join } = require('path')
const cleanCSS = require('gulp-clean-css')
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
sass.compiler = require('node-sass')
const path = join(__dirname, 'src')

const compileSCSS = () => {
  return src(sync(join(path, 'scss', '**/*.scss')))
    .pipe(sass().on('error', sass.logError))
    .pipe(dest(join(path, 'dist')))
}

const compileJS = () => {
  // compiling all js (even nested) code from the `src/js`
  return src(sync(join(path, 'js', '**/*.js')))
    .pipe(
      babel({
        presets: ['@babel/env'],
      })
    )
    .pipe(dest(join(path, 'dist')))
}

const minifyCSS = () => {
  return src(sync(join(path, 'dist', '**/*.css')))
    .pipe(cleanCSS())
    .pipe(dest(join(path, 'dist')))
}

const minifyJS = () => {
  // minfy all the js (even nested ones) files inside `src/dist/`
  return src(sync(join(path, 'dist', '**/*.js')))
    .pipe(uglify())
    .pipe(dest(join(path, 'dist')))
}


// we are calling `compileJS` & `compileSCSS` in parallel and wating 
// for them both to finish, then after that we are calling 
// `minifyCSS` & `minifyJS` in the same way. cool right?
exports.default = series(
  parallel(compileJS, compileSCSS),
  parallel(minifyCSS, minifyJS)
)