gulpfile.ts

import * as esbuild from 'esbuild';

import autoprefixer from 'gulp-autoprefixer';
import {exec} from 'child_process';
import glob from 'glob';
import gulp from 'gulp';
import sass from 'gulp-dart-sass';

const ENTRIES = {
  js: {
    // Files first processed by `tsc`, and later output by `esbuild`.
    entrypoints: () => {
      return [
        './dist/tsc/main.js',
        ...glob.sync('./dist/tsc/components/**/*.js'),
        ...glob.sync('./dist/tsc/partials/**/*.js'),
      ];
    },
    // Where to output chunks generated by `esbuild`.
    outDir: './dist/chunks/',
    watch: ['./src/**/*.ts', './src/**/*.tsx'],
  },
  sass: {
    includePaths: ['./node_modules/', './src/sass/', './src/'],
    src: ['./src/partials/**/*.sass', './src/sass/*.sass'],
    outDir: './dist/css/',
    watch: ['./src/**/*.sass'],
  },
};

/**
 * esBuild does not do type checks and can build with type errors so we first run
 * `tsc` and generate a JS file. esBuild is then run on the outputted JS file.
 *
 * The entry point of tsc compilation is configured in tsconfig `include`.
 */
const runEsBuild = async prod => {
  return new Promise<void>((resolve, reject) => {
    exec('tsc', async (error, stderr) => {
      if (stderr) {
        console.error('TypeScript errors');
        console.error(stderr);
        reject();
      } else {
        await esbuild.build({
          bundle: true,
          chunkNames: 'chunks/[name]-[hash]-min',
          define: {
            ...(prod && {'process.env.NODE_ENV': "'production'"}),
          },
          entryPoints: ENTRIES.js.entrypoints(),
          format: 'esm',
          jsxFactory: 'preact.h',
          jsxFragment: 'preact.Fragment',
          minify: prod,
          outdir: ENTRIES.js.outDir,
          platform: 'browser',
          splitting: true,
        });
        resolve();
      }
    });
  });
};

gulp.task('build:js', async () => {
  await runEsBuild(true);
});

gulp.task('build:sass', () => {
  return gulp
    .src(ENTRIES.sass.src)
    .pipe(
      sass({
        outputStyle: 'compressed',
        includePaths: ENTRIES.sass.includePaths,
      })
    )
    .on('error', sass.logError)
    .pipe(autoprefixer())
    .pipe(gulp.dest(ENTRIES.sass.outDir));
});

gulp.task('watch:sass', () => {
  return gulp.watch(
    ENTRIES.sass.watch,
    {ignoreInitial: false},
    gulp.series('build:sass')
  );
});

gulp.task('watch:js', async cb => {
  await runEsBuild(false);
  gulp.watch(ENTRIES.js.watch, async () => {
    await runEsBuild(false);
    cb();
  });
});

gulp.task('watch', gulp.parallel('watch:js', 'watch:sass'));
gulp.task('build', gulp.parallel('build:sass', 'build:js'));
gulp.task('default', gulp.series('watch'));