We are pleased to announce the public beta of ColdBox Elixir v3. You can install it today from NPM

npm install --dev coldbox-elixir@beta

You can also view the updated documentation here.

Not sure what ColdBox Elixir is? Read on.

(If you are familiar with ColdBox Elixir, go ahead and skip the next section.)

What is ColdBox Elixir?

ColdBox Elixir is a build tool for front-end assets. It enable building, processing, minifying, and bundling CSS, Javascript, images, and more. With ColdBox Elixir you can combine multiple scripts and stylesheets, use CSS preprocessors, and use modern Javascript features and frameworks.

ColdBox Elixir is intended for projects that are mostly server-side HTML with Javascript sprinkled around. If your application leans more towards the single-page app (SPA) side of things, ColdBox Elixir is probably not for you. And while ColdBox Elixir can be used in any project and any language the default conventions make it perfect for a ColdBox or ContentBox application.

What's New in ColdBox Elixir v3

Version 3 of ColdBox Elixir is quite a shakeup. Gulp has been dropped in favor of Webpack as the bundler and task runner. (Don't worry, you won't need to know Webpack to use ColdBox Elixir.) At the same time the API surface has been trimmed to allow focus on the most used features of ColdBox Elixir. (See the Migration Guide for the complete details.)

Version 3 keeps the same API as previous versions of ColdBox Elixir. The main difference is now the result of the elixir call is exported as your Webpack config. Instead of a gulpfile.js, you invoke elixir from your webpack.config.js file.

// webpack.config.js
const elixir = require("coldbox-elixir");

module.exports = elixir(mix => {
    mix.css("app.css");
    mix.js("app.js");
});

So Why Webpack?

You might be wondering why the change? What do we get with such a large underlying change? Let's take a look:

Gulp 4

It started with seeing a lot of Gulp 3 plugins being deprecated with no real alternative. A lot of the suggestions pointed to Gulp 4 which has been in alpha for a while. Additionally, Gulp has lost a lot of mindshare in the Javascript community. While this is not a good enough reason to change, it is a consideration as modern Javascript is made to support the more modern tools over older tools.

Performance

At Ortus Solutions we often stretch the limits of our own software. ColdBox Elixir was no exception. Our largest and most modular apps were over two dozen files in Webpack. In the old version of Elixir, this created a new Webpack build process for each file. This overhead was especially heavy when trying to watch files for changes. To put it frankly, ColdBox Elixir couldn't handle the load. This new version of ColdBox Elixir bundles each file in a single process. Additionally, it uses Webpack's own watch mode instead of trying to integrate Gulp's watch system with Webpack. It handles our most demanding applications with ease.

Features

Relying on Webpack for the foundation of ColdBox Elixir allows for powerful bundling techniques. Relative assets in stylesheets are verified automatically and either copied or inlined in the bundled stylesheet. Missing build dependencies are automatically installed. Watch mode is lightning fast for rebuilds. Versioning is built in and fast. And, best of all, if there is any missing feature, ColdBox Elixir allows for easy extending of the underlying Webpack config.

Try It Out Today!

ColdBox Elixir v3 is currently in public beta. You can install it from NPM with npm install --dev coldbox-elixir@beta. The docs are available here. Please file any issues in our issue tracker. If you have any questions or feedback, you can also find us on the CFML Slack.

Good luck and happy bundling!