How to set up Broccoli for a JavaScript project?

Install broccoli and broccoli-cli via npm, create a Brocfile.js exporting a function that returns a tree (like your source directory), and use plugins such as broccoli-funnel for file manipulation, as detailed in the README's Brocfile examples.

Broccoli vs Webpack: which is better for asset pipelines?

Broccoli focuses on incremental rebuilds and a modular plugin architecture for speed and flexibility, while Webpack is a bundler with more built-in features; Broccoli is ideal for custom pipelines but requires more configuration compared to Webpack's opinionated setup.

How to use TypeScript with Broccoli build configuration?

Use a Brocfile.ts file instead of .js, and Broccoli will automatically parse it with ts-node, enabling type-safe configuration and better developer experience, as explained in the TypeScript support section of the README.

What plugins are essential for Broccoli?

Common plugins include broccoli-funnel for file copying, broccoli-merge-trees for combining trees, and others for tasks like minification or transpilation, all available under the broccoli-plugin keyword on npm, as referenced in the plugins section.

How to run Broccoli in production safely?

Avoid `broccoli serve`; use `broccoli build` to precompile assets into static files, then serve them with a standard web server like Nginx or Apache, following the security warning in the README to minimize attack surface.

Can Broccoli be integrated with Express.js?

Yes, use the programmatic API with the Builder class to run Broccoli as part of your build process, then sync the output to a public directory in your Express app, as demonstrated in the 'Using Broccoli Programmatically' section.

Open-Awesome

Broccoli

MITJavaScriptv4.0.0-broccoli

A fast, reliable asset pipeline for browser applications, supporting constant-time rebuilds and compact build definitions.

Visit Website GitHub

3.3k stars207 forks0 contributors

What is Broccoli?

Broccoli is a fast, reliable asset pipeline for browser-based applications, designed to compile and transform frontend assets like JavaScript, CSS, and HTML. It solves the problem of slow build times by supporting constant-time rebuilds and offers a modular, plugin-based architecture for flexible build configurations.

Target Audience

Frontend developers and teams building modern web applications who need an efficient, incremental build tool for asset compilation and transformation.

Value Proposition

Developers choose Broccoli for its speed through incremental rebuilds, its clean and declarative configuration via Brocfile.js, and its extensive plugin ecosystem that makes it highly extensible for various build tasks.

Overview

Browser compilation library – an asset pipeline for applications that run in the browser

Use Cases

Best For

Building complex frontend applications with multiple asset types
Setting up incremental build pipelines for faster development
Integrating asset compilation into custom build tools or scripts
Creating modular build configurations with reusable plugins
Migrating from Rails asset pipeline to a Node.js-based solution
Ensuring reliable and repeatable builds across development and production

Not Ideal For

Projects requiring zero-configuration build tools with built-in bundling and optimization
Teams preferring graphical user interfaces or low-code build solutions
Applications needing tight integration with server-side rendering or full-stack frameworks without extra setup
Environments where minimizing plugin dependencies and maintenance overhead is critical

Pros & Cons

Pros

Fast Incremental Builds

Supports constant-time rebuilds by only processing changed files, dramatically speeding up development workflows as highlighted in the README's key features.

Modular Plugin Ecosystem

Extensible via a rich ecosystem of plugins under the broccoli-plugin keyword on npm, allowing tasks like transpilation and minification without locking into a monolithic tool.

Declarative Configuration

Uses simple Brocfile.js or Brocfile.ts files for type-safe build definitions, making pipelines easy to set up and maintain, as shown in the installation examples.

Backend-Agnostic Flexibility

Runs on Node.js and is not tied to any specific backend stack, offering integration freedom for various web applications, per the philosophy section.

Cons

Production Serving Limitations

The README explicitly warns against using `broccoli serve` in production due to security risks, requiring additional steps like precompiling assets with `broccoli build` and serving static files separately.

Plugin Dependency Complexity

Essential build tasks, such as file funneling or merging, require installing and managing separate plugins (e.g., broccoli-funnel), increasing setup time and potential maintenance issues.

Manual Configuration Burden

Lacks out-of-the-box solutions; users must manually define build pipelines in Brocfile.js, which can be cumbersome for simple projects or teams unfamiliar with asset pipeline concepts.

Open Source Alternative To

Broccoli is an open-source alternative to the following products:

Rails asset pipeline

The Rails asset pipeline is a framework in Ruby on Rails that concatenates, minifies, and compresses JavaScript and CSS assets for production deployment.

Frequently Asked Questions

Related Projects

Vite

Next generation frontend tooling. It's fast!

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

The zero configuration build tool for the web. 📦🚀

A toolkit to automate & enhance your workflow

Stars32,963

Forks4,148

Last commit3 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

Broccoli

MITJavaScriptv4.0.0-broccoli

A fast, reliable asset pipeline for browser applications, supporting constant-time rebuilds and compact build definitions.

Visit Website GitHub

3.3k stars207 forks0 contributors

What is Broccoli?

Target Audience

Frontend developers and teams building modern web applications who need an efficient, incremental build tool for asset compilation and transformation.

Value Proposition

Overview

Browser compilation library – an asset pipeline for applications that run in the browser

Use Cases

Best For

Building complex frontend applications with multiple asset types
Setting up incremental build pipelines for faster development
Integrating asset compilation into custom build tools or scripts
Creating modular build configurations with reusable plugins
Migrating from Rails asset pipeline to a Node.js-based solution
Ensuring reliable and repeatable builds across development and production

Not Ideal For

Projects requiring zero-configuration build tools with built-in bundling and optimization
Teams preferring graphical user interfaces or low-code build solutions
Applications needing tight integration with server-side rendering or full-stack frameworks without extra setup
Environments where minimizing plugin dependencies and maintenance overhead is critical

Pros & Cons

Pros

Fast Incremental Builds

Supports constant-time rebuilds by only processing changed files, dramatically speeding up development workflows as highlighted in the README's key features.

Modular Plugin Ecosystem

Extensible via a rich ecosystem of plugins under the broccoli-plugin keyword on npm, allowing tasks like transpilation and minification without locking into a monolithic tool.

Declarative Configuration

Uses simple Brocfile.js or Brocfile.ts files for type-safe build definitions, making pipelines easy to set up and maintain, as shown in the installation examples.

Backend-Agnostic Flexibility

Runs on Node.js and is not tied to any specific backend stack, offering integration freedom for various web applications, per the philosophy section.

Cons

Production Serving Limitations

Plugin Dependency Complexity

Essential build tasks, such as file funneling or merging, require installing and managing separate plugins (e.g., broccoli-funnel), increasing setup time and potential maintenance issues.

Manual Configuration Burden

Lacks out-of-the-box solutions; users must manually define build pipelines in Brocfile.js, which can be cumbersome for simple projects or teams unfamiliar with asset pipeline concepts.

Open Source Alternative To

Broccoli is an open-source alternative to the following products:

Rails asset pipeline

The Rails asset pipeline is a framework in Ruby on Rails that concatenates, minifies, and compresses JavaScript and CSS assets for production deployment.