@gritdigital/grit-build
v0.7.1
Published
A thin wrapper around [esbuild](https://esbuild.github.io/) to make bundling for the web a little easier.
Downloads
74
Maintainers
Readme
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