@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	Latest
@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

Third-party extensions

Have you produced a Bud extension and want to share it here? Please, create an issue sharing information about your project.

Documentation and details

• Documentation
• Getting started
• Configuration
• CLI

Contributing

Contributions are welcome from everyone.

We have contributing guidelines to help you get started.

Bud sponsors

Help support our open-source development efforts by becoming a patron.

Community

Keep track of development and community news.

• Participate on the Roots Discourse
• Follow @rootswp on Twitter
• Read and subscribe to the Roots Blog
• Subscribe to the Roots Newsletter
• Listen to the Roots Radio podcast