@gritdigital/grit-build v0.7.1

GRIT Build

A thin wrapper around esbuild to make bundling for the web a little easier.

Features

• Tailwind support.
• Manifest file generation.
• Browsersync when gritBuild is executed with a --watch flag.
• Directory copy/paste on build completion.
• Clear output directory before build.
• Remove specified files on build completion.
• Exports eslint and prettier plugins/configs.
• Accessibility testing with pa11y.
• Lighthouse testing with lighthouse.

Getting Started

npm install @gritdigital/grit-build --save-dev

Example Usage

import gritBuild from "@gritdigital/grit-build";

gritBuild({
  esbuild: {
    entryPoints: [
      {
        in: "./resources/ts/index.ts",
        out: "js/index",
      },
      {
        in: "./resources/styles/index.css",
        out: "css/index",
      },
    ],
    outdir: "./theme/assets",
    loader: {
      ".woff2": "file",
    },
  },
  clearOutdir: true,
  siteUrl: "https://example.grit",
  watchPoints: ["./theme/pages/**/*.html"],
});

Regardless of the location you call gritBuild, the paths should be relative to your projects root.

Interface & Defaults

interface GritBuildConfigT {
	esbuild: esbuild.BuildOptions;
	siteUrl: string;
	manifestFiles?: string[];
	copyDirs?: Array<{
		from: string;
		to: string;
	}>; // []
	removeFiles?: Array<string>;
	clearOutdir?: boolean; // false
	clearOutdirIgnore?: string[]; // []
	tailwind?: boolean; // true
	tailwindConfig?: string; // ./tailwind.config.js
	watchPoints?: string[]; // []
}

Plugins

Esbuild Plugins

import {
  copyDirsPlugin,
  manifestPlugin,
  clearOutdirPlugin,
  browserSyncPlugin,
  removeFilesPlugin,
} from "@gritdigital/grit-build/esbuild";

Eslint Plugin

// .eslint.config.mjs
import gritEslint from "@gritdigital/grit-build/eslint";

export default [
    ...gritEslint.configs.recommended,
]

Prettier Plugins

// .prettier.config.js

export { default } from "@gritdigital/grit-build/prettier";

// or

import prettier from "@gritdigital/grit-build/prettier";

export default {
  ...prettier,
  // your custom config
}

Helpers

getTwigImportPaths

This is a helper function for Twig and Tailwind setups that allows you to recursively find all of the twig include/embed paths for a given set of components. This is inteded to be used in conjunction with Tailwind's content property.

import { getTwigImportPaths } from "@gritdigital/grit-build/helpers";

export default {
  content: [
    "theme/**/*.html",
    ...getTwigImportPaths({
      root: "views",
      components: ["blocks/block-1.twig", "blocks/block-2.twig"],
      // aliases: {
        // "@ui/": "",
      // },
      ignoreComponents: [],
      ignoreImports: [],
    }),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Testing

Accessibility

npx grit-tests-accessibility --sitemap https://mysite.local/sitemap_index.xml --standard WCAG2AA --url https://mysite.local

If you provide both a sitemap and url, the url will be used as the default. Its recommended to just provide one of the two flags.

Lighthouse

npx grit-tests-lighthouse --url https://mysite.local