Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
faucet-pipeline @ Ruby on Ice
Search
Lucas Dohmen
January 28, 2018
Programming
0
91
faucet-pipeline @ Ruby on Ice
A new asset pipeline that is framework agnostic
Lucas Dohmen
January 28, 2018
Tweet
Share
More Decks by Lucas Dohmen
See All by Lucas Dohmen
Frontend Architecture
moonglum
1
75
Weird Parts
moonglum
0
90
Webanwendungen – Eine Frage des Stils
moonglum
0
270
AdequateJS: Where should I run my Code?
moonglum
0
54
Per Anhalter durch JavaScript
moonglum
0
160
Architectures for Modern Web Front Ends
moonglum
2
480
Per Anhalter durch JavaScript
moonglum
0
190
Architectures for Modern Web Front Ends
moonglum
0
110
AdequateJS: Wie viel JavaScript darf es denn sein?
moonglum
1
380
Other Decks in Programming
See All in Programming
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
100
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
220
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
300
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
150
Open source software: how to live long and go far
gaelvaroquaux
0
660
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
Jakarta EE meets AI
ivargrimstad
0
300
color-scheme: light dark; を完全に理解する
uhyo
7
490
Better Code Design in PHP
afilina
0
160
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
980
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
Side Projects
sachag
452
42k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Being A Developer After 40
akosma
89
590k
Site-Speed That Sticks
csswizardry
4
400
For a Future-Friendly Web
brad_frost
176
9.6k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
BBQ
matthewcrist
87
9.5k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Transcript
None
A new asset pipeline
None
extracted
•Open Source •Written in Node.js •Built upon existing tooling (Rollup,
Babel, node-sass, Autoprefixer, Browserslist, chokidar) •Web framework agnostic
Pick & Choose • Bundle modern JavaScript modules into a
single distribution file • Combine Sass modules into a single CSS file • Copy static files
module.exports = { };
module.exports = { }; js: [{ source: "./index.js", target: "./public/app.js"
}],
module.exports = { }; js: [{ source: "./index.js", target: "./public/app.js"
}], sass: [{ source: "./index.scss", target: "./public/app.css" }],
module.exports = { }; js: [{ source: "./index.js", target: "./public/app.js"
}], sass: [{ source: "./index.scss", target: "./public/app.css" }], static: [{ source: "./images", target: "./public/images" }]
.browserslistrc > 1% Last 2 versions IE 11
.browserslistrc > 1% Last 2 versions IE 11 㱺 CSS
will automatically be prefixed accordingly
.browserslistrc > 1% Last 2 versions IE 11 㱺 CSS
will automatically be prefixed accordingly 㱺 JS will automatically be transformed accordingly
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
Alternatives • https:/ /webpack.js.org • https:/ /neutrino.js.org • https:/ /parceljs.org
1.0.0 currently in beta available on npm
faucet-pipeline.org