faucet-pipeline @ Ruby on Ice

A new asset pipeline that is framework agnostic

Transcript

2. A new asset pipeline
4. extracted
5. •Open Source •Written in Node.js •Built upon existing tooling (Rollup, Babel, node-sass, Autoprefixer, Browserslist, chokidar) •Web framework agnostic
6. Pick & Choose • Bundle modern JavaScript modules into a single distribution file • Combine Sass modules into a single CSS file • Copy static files
7. module.exports = { };
8. module.exports = { }; js: [{ source: "./index.js", target: "./public/app.js" }],
9. module.exports = { }; js: [{ source: "./index.js", target: "./public/app.js" }], sass: [{ source: "./index.scss", target: "./public/app.css" }],
10. module.exports = { }; js: [{ source: "./index.js", target: "./public/app.js" }], sass: [{ source: "./index.scss", target: "./public/app.css" }], static: [{ source: "./images", target: "./public/images" }]
11. .browserslistrc > 1% Last 2 versions IE 11
12. .browserslistrc > 1% Last 2 versions IE 11 㱺 CSS will automatically be prefixed accordingly
13. .browserslistrc > 1% Last 2 versions IE 11 㱺 CSS will automatically be prefixed accordingly 㱺 JS will automatically be transformed accordingly
14. Cache Busting • Can fingerprint your files • Creates a mapping JSON file that can be read by your app to figure out the fingerprinted names • That’s what a tiny gem does for Rails
15. Alternatives • https:/ /webpack.js.org • https:/ /neutrino.js.org • https:/ /parceljs.org
16. 1.0.0 currently in beta available on npm
17. faucet-pipeline.org