gulpfile.js

// requirements
import gulp from 'gulp'
import gulpSass from 'gulp-sass'
import rename from 'gulp-rename'
import webpack from 'webpack'
import sourcemaps from 'gulp-sourcemaps'
import { resolve } from 'path'
import webpackConfig from './webpack.config.cjs'
import dartSass from 'sass'

const sass = gulpSass(dartSass)

// define paths
const dest = 'build'
const assetPath = 'assets'
const gensCss = [
  `${assetPath}/css/gens.scss`
]

// run webpack
function runWebpack (config) {
  return new Promise((resolve, reject) => {
    webpack(config, (err, stats) => {
      if (err) {
        return reject(err)
      }
      // FIXME: Restore when typescript compilation errors are resolved
      // if (stats.hasErrors()) {
      //   return reject(new Error(stats.compilation.errors.join('\n')))
      // }
      resolve()
    })
  })
}

// PRODUCTION tasks
gulp.task('build-js', function () {
  return runWebpack(webpackConfig)
})

gulp.task('build-gens-css', function () {
  return gulp.src(gensCss)
    .pipe(rename('gens.min.css'))
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(`${dest}/css`))
})

gulp.task('build-home-css', function () {
  return gulp.src(`${assetPath}/css/home.scss`)
    .pipe(rename('home.min.css'))
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(`${dest}/css`))
})

gulp.task('build-landing-css', function () {
  return gulp.src(`${assetPath}/css/landing.scss`)
    .pipe(rename('landing.min.css'))
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(`${dest}/css`))
})

gulp.task('build-about-css', function () {
  return gulp.src(`${assetPath}/css/about.scss`)
    .pipe(rename('about.min.css'))
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(`${dest}/css`))
})

gulp.task('build-error-css', function () {
  return gulp.src(`${assetPath}/css/error.scss`)
    .pipe(rename('error.min.css'))
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'compressed' }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(`${dest}/css`))
})

gulp.task('build', gulp.parallel('build-js', 'build-gens-css', 
'build-home-css', 'build-landing-css', 'build-about-css', 'build-error-css'))

// DEVELOPMENT tasks
//
const devGlobalAssets = 'gens/static'
const devGensAssets = 'gens/blueprints/gens/static'
const devAboutAssets = 'gens/blueprints/home/static'

gulp.task('build-js-dev', () => {
  webpackConfig.mode = 'development'
  webpackConfig.output.path = resolve('./gens/blueprints/gens/static/')
  return runWebpack(webpackConfig)
})

gulp.task('build-gens-css-dev', () => {
  return gulp.src(gensCss)
    .pipe(rename('gens.min.css'))
    .pipe(sass())
    .pipe(gulp.dest(devGensAssets))
})

gulp.task('build-about-css-dev', () => {
  return gulp.src(`${assetPath}/css/about.scss`)
    .pipe(rename('about.min.css'))
    .pipe(sass())
    .pipe(gulp.dest(devAboutAssets))
})

gulp.task('build-landing-css-dev', () => {
  return gulp.src(`${assetPath}/css/landing.scss`)
    .pipe(rename('landing.min.css'))
    .pipe(sass())
    .pipe(gulp.dest(devAboutAssets))
})

gulp.task('build-home-css-dev', () => {
  return gulp.src(`${assetPath}/css/home.scss`)
    .pipe(rename('home.min.css'))
    .pipe(sass())
    .pipe(gulp.dest(devAboutAssets))
})

gulp.task('build-error-css-dev', () => {
  return gulp.src(`${assetPath}/css/error.scss`)
    .pipe(rename('error.min.css'))
    .pipe(sass())
    .pipe(gulp.dest(`${devGlobalAssets}/css`))
})

gulp.task('watch', () => {
  gulp.watch(`${assetPath}/css/*.scss`, gulp.parallel('build-gens-css-dev', 'build-home-css-dev',
    'build-about-css-dev', 'build-landing-css-dev', 'build-error-css-dev'))
  gulp.watch(`${assetPath}/js/*.ts`, gulp.parallel('build-js-dev'))
  gulp.watch(`${assetPath}/js/*/*.ts`, gulp.parallel('build-js-dev'))
})