the no-nonsense asset pipeline for humans

faucet-pipeline takes care of pre-processing CSS, compiling modern JavaScript and framework-independent fingerprinting to take advantage of HTTP caching. It lets you focus on source code instead of complex, highly customized build tools: With minimal configuration, you can take advantage of the front-end community’s established tooling without worrying about low-level details.

Creating a CSS bundle from Sass modules:

export const sass = [{
    source: "./styles/index.scss",
    target: "./dist/bundle.css"
}];

Bundling and transpiling JavaScript:

export const js = [{
    source: "./src/index.js",
    target: "./dist/bundle.js",
    esnext: true // activates ES6 transpiler
}];

Fingerprinting arbitrary files, like fonts and images:

export const static = [{
    source: "./assets",
    target: "./dist/assets"
}];

Getting Started

To avoid unnecessary bloat, you’re only required to install the functionality you need. Let’s start with some JavaScript:

$ npm install faucet-pipeline-js

Configuration resides in faucet.config.js – in this case, we want to bundle our JavaScript::

export const js = [{
    source: "./src/index.js",
    target: "./dist/bundle.js"
}];

Let’s create two source files within the src directory, index.js and util.js:

import log from "./util";

log("info", "hello world");
export default function log(level, message) {
    console.log(`[${level}]`, message);
}

Now we can compile our bundle:

$ npx faucet

(npx is merely a shortcut for commands in node_modules/.bin – you might also define npm scripts to use npm start, for example.)

We can also run it in watch mode:

$ npx faucet --watch

That’s it! We can now execute that bundle, either in a browser or via Node:

$ node dist/bundle.js
[info] hello world

The JavaScript docs provide a more detailed explanation, including configuration options. You might also be interested in Sass, images, static files, or fingerprinting.