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 imagemin      = require('gulp-imagemin');
const gulpif        = require('gulp-if');
const clean         = require('gulp-dest-clean');

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);
    }))
    .pipe(eslint.failAfterError());

  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(clean("dist/res"))
    .pipe(gulpif(
      file => file.basename.match(/\.png|jpg|jpeg|gif|svg/gmi) !== [],
      imagemin()
    ))
    .pipe(gulp.dest("dist/res"));
};

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

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