.eleventy.js

const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
const webcPlugin = require("@11ty/eleventy-plugin-webc");

const cssMinifier = require("clean-css");
const htmlMinifier = require("html-minifier-terser");
const jsMinifier = require("terser");

const root_folder = "src";

async function minifyCSS(content) {
  if (this.type === "css") {
    options = {
      level: {
        1: {
          specialComments: 0,
        },
      },
    };

    return new cssMinifier(options).minify(content).styles;
  }

  return content;
}

async function minifyHTML(content) {
  if (this.page.outputPath.endsWith(".html")) {
    options = {
      collapseBooleanAttributes: true,
      collapseInlineTagWhitespace: true,
      collapseWhitespace: true,
      // conservativeCollapse: true,
      decodeEntities: true,
      includeAutoGeneratedTags: false,
      minifyURLs: true,
      preventAttributesEscaping: true,
      processConditionalComments: true,
      removeAttributeQuotes: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeOptionalTags: true,
      removeRedundantAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      sortAttributes: true,
      sortClassName: true,
      trimCustomFragments: true,
      useShortDoctype: true,
    };

    return htmlMinifier.minify(content, options);
  }

  return content;
}

async function minifyJS(content) {
  if (this.type === "js") {
    minified = await jsMinifier.minify(content);
    return minified.code;
  }

  return content;
}

module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(bundlerPlugin, {
    transforms: [minifyCSS, minifyJS],
  });
  eleventyConfig.addPlugin(webcPlugin, {
    components: root_folder + "/_includes/components/**/*.webc",
  });

  eleventyConfig.addTransform("Minify HTML", minifyHTML);

  return {
    dir: {
      input: root_folder,
    },
    htmlTemplateEngine: "webc",
    markdownTemplateEngine: "webc",
  };
};