gulpfile.js

/* eslint-disable no-console */

const gulp = require("gulp");
const plugins = require("gulp-load-plugins")();
const del = require("del");

const files = {
  html: "src/**/*.html",
  js: ["src/**/*.js", "!src/**/lib/**"],
  css: "src/**/*.css",
  static: ["src/**/lib/**", "src/**/*.png"],
  build: "dist",
};

const clean = () => del([`${files.build}/*`]);

const buildHTML = () =>
  gulp
    .src(files.html)
    .pipe(
      plugins.htmlmin({
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        includeAutoGeneratedTags: false,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeComments: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        useShortDoctype: true,
      })
    )
    .pipe(gulp.dest(files.build))
    .on("error", console.error);

const buildJS = () =>
  gulp
    .src(files.js)
    .pipe(
      plugins.babel({
        presets: ["@babel/env"],
      })
    )
    .pipe(
      plugins.uglify({
        output: {
          ascii_only: true,
        },
      })
    )
    .pipe(gulp.dest(files.build))
    .on("error", console.error);

const buildCSS = () =>
  gulp
    .src(files.css)
    .pipe(plugins.plumber())
    .pipe(
      plugins.cleanCss({
        level: {
          2: {
            all: true,
          },
        },
      })
    )
    .pipe(gulp.dest(files.build))
    .on("error", console.error);

const buildStatic = () =>
  gulp
    .src(files.static)
    .pipe(gulp.dest(files.build))
    .on("error", console.error);

const build = gulp.series(
  clean,
  gulp.parallel(buildHTML, buildJS, buildCSS, buildStatic)
);

const watch = () => {
  gulp.watch(files.html, buildHTML);
  gulp.watch(files.js, buildJS);
  gulp.watch(files.css, buildCSS);
  gulp.watch(files.static, buildStatic);
};

exports.build = build;
exports.watch = watch;

exports.default = gulp.series(build, watch);