asdf-browser-template/gulpfile.js

/* eslint-disable @typescript-eslint/no-var-requires */
const gulp = require("gulp");
const tsify = require("tsify");
const sourcemaps = require("gulp-sourcemaps");
const rename = require("gulp-rename");
const browserify = require("browserify");
const source = require("vinyl-source-stream");
const buffer = require("vinyl-buffer");
const terser = require("gulp-terser");
const eslint = require("gulp-eslint");
const babelify = require("babelify");
const htmlmin = require("gulp-html-minifier-terser");
const htmlvalidator = require("gulp-html");

const html = () => {
  return gulp
    .src("src/index.html")
    .pipe(htmlvalidator())
    .pipe(
      htmlmin({
        removeComments: true,
        collapseWhitespace: true,
        collapseBooleanAttributes: true,
        collapseInlineTagWhitespace: true,
        removeRedundantAttributes: true,
        minifyCSS: true,
      }),
    )
    .pipe(gulp.dest("dist"));
};

const js = () => {
  gulp
    .src(["src/**/*.ts", "!node_modules/**"])
    .pipe(eslint({ quiet: true }))
    .pipe(
      eslint.results(results => {
        // Called once for all ESLint results.
        console.log("ESLint results:\n");
        console.log(`Total Errors: ${results.errorCount}`);
        let output = "";
        results.forEach(file => {
          output += file.filePath + "\n";
          file.messages.forEach(message => {
            output +=
              " - " +
              message.message +
              " at " +
              message.line +
              ":" +
              message.column +
              "\n";
          });
          output += "\n";
        });
        console.error(output);
      }),
    );

  return browserify("src/index.ts")
    .plugin(tsify, { noImplicitAny: true, target: "es6" })
    .transform(babelify, { extensions: [".tsx", ".ts"] })
    .bundle()
    .on("error", e => console.error(e))
    .pipe(source("output.js"))
    .pipe(gulp.dest("dist"))
    .pipe(buffer())
    .pipe(sourcemaps.init())
    .pipe(terser())
    .pipe(rename({ extname: ".min.js" }))
    .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file
    .pipe(gulp.dest("dist"));
};

const res = () => {
  return gulp.src("src/res/**/*.*").pipe(gulp.dest("dist"));
};

exports.default = gulp.parallel(js, html, res);

exports.watch = () => {
  console.log("Ready for changes!");
  gulp.watch(["src/**/*.js", "src/**/*.ts"], js);
  gulp.watch("src/*.html", html);
  gulp.watch("res/**/*.*", res);
};