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
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::
module.exports = {
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.