@roots/bud

A friendly build tool to help manage your project assets.

Installation
Getting started
Running a build
- Running in production mode
- Running in development mode
Example implementations
Extending
- First-party extensions
- Third-party extensions
Documentation and details
Contributing
Bud sponsors
Community

Installation

Install @roots/bud and @roots/bud-cli to your project

yarn add @roots/bud @roots/bud-cli --dev

Getting started

Bud can either be configured with a static config file (json/yml) or a builder module (js/ts).

Dead simple bud.config.js example

module.exports = (bud) => bud.entry("app", ["app.js"]);

Or, as bud.config.yml

entry:
  app: "app.js"

A more advanced configuration might look like

import { Bud } from "@roots/bud";

export default (bud: Bud) =>
  bud
    .use([
      require("@roots/bud-babel"),
      require("@roots/bud-postcss"),
      require("@roots/bud-react"),
    ])

    .library(["react", "react-dom"])

    .entry({ app: ["app.{js,css}"] })

    .when(
      bud.isProduction,
      ({ minimize }) => minimize(),
      ({ devtool }) => devtool("eval-source-map")
    );

Which could also be expressed in a set of yml files

# bud.config.yml
extensions:
  - "@roots/bud-babel"
  - "@roots/bud-postcss"
  - "@roots/bud-react"
library:
  - "react"
  - "react-dom"
entry:
  app: "app.{js,css}"

# bud.production.config.yml
minimize: true

# bud.development.config.yml
devtool: "eval-source-map"

For more on configuring @roots/bud check out the dedicated documentation.

Running a build

Once you've set up your configuration file the following command will run the build:

yarn bud build

You should see your built assets in the dist urlectory of your project.

Running in `production` mode

yarn bud build:production

Running in `development` mode

yarn bud build:development

Example implementations

There are example implementations available.

Extending

Bud provides an intentionally sparse set of out-of-the-box features.

In fact, much of the core of Bud is actually made up of extensions. This is to make it easy for devs to swap out parts of the framework as needed.

That said, you will likely want to utilize extensions in your project.

If you're unsure where to start or what you need you can try the @roots/bud-preset-recommend preset. Most require zero configuration.

First-party extensions

There are a number of Roots maintained extensions available to kickstart your project

Name	Project home	Extension docs
@roots/bud-babel	@babel/babel	📚 README
@roots/bud-compress	@webpack-contrib/compression-webpack-plugin	📚 README
@roots/bud-criticalcss	@addyosmani/critical	📚 README
@roots/bud-emotion	@emotion/emotion-css	📚 README
@roots/bud-entrypoints	@roots/entrypoints-webpack-plugin	📚 README
@roots/bud-esbuild	@roots/esbuild-loader	📚 README
@roots/bud-eslint	@webpack-contrib/eslint-webpack-plugin	📚 README
@roots/bud-imagemin	@webpack-contrib/image-minimizer-webpack-plugin	📚 README
@roots/bud-library	@asfktz/autodll-webpack-plugin	📚 README
@roots/bud-mdx	@mdx-js/mdx	📚 README
@roots/bud-postcss	@postcss/postcss	📚 README
@roots/bud-prettier	@prettier/prettier	📚 README
@roots/bud-purgecss	@FullHuman/purgecss	📚 README
@roots/bud-react	@facebook/react	📚 README
@roots/bud-sass	@sass/sass	📚 README
@roots/bud-stylelint	@stylelint/stylelint	📚 README
@roots/bud-tailwindcss	@tailwindlabs/tailwindcss	📚 README
@roots/bud-terser	@terser/terser	📚 README
@roots/bud-typescript	@TypeStrong/ts-loader	📚 README
@roots/bud-vue	@vue/vue	📚 README
@roots/bud-wordpress-dependencies	@roots/wordpress-dependencies-webpack-plugin	📚 README
@roots/bud-wordpress-externals	@roots/wordpress-externals-webpack-plugin	📚 README
@roots/bud-wordpress-manifests	@roots/merged-manifest-webpack-plugin	📚 README