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:

    source: "./styles/index.scss",
    target: "./dist/bundle.css"

Bundling and transpiling JavaScript:

    source: "./src/index.js",
    target: "./dist/bundle.js",
    esnext: true // activates ES6 transpiler

Fingerprinting arbitrary files, like fonts and images:

    source: "./assets",
    target: "./dist/assets"

Getting Started

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

$ npm install faucet-pipeline-esnext

Configuration resides in faucet.config.js – in this case, we want to transpile modern JavaScript (ES6) to backwards-compatible ES5:

module.exports = {
    js: [{
        source: "./src/index.js",
        target: "./dist/bundle.js",
        esnext: true
    }]
};

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 CSS, images, static files or fingerprinting.