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
85
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
64
Weird Parts
moonglum
0
79
Webanwendungen – Eine Frage des Stils
moonglum
0
260
AdequateJS: Where should I run my Code?
moonglum
0
43
Per Anhalter durch JavaScript
moonglum
0
130
Architectures for Modern Web Front Ends
moonglum
2
470
Per Anhalter durch JavaScript
moonglum
0
170
Architectures for Modern Web Front Ends
moonglum
0
97
AdequateJS: Wie viel JavaScript darf es denn sein?
moonglum
1
350
Other Decks in Programming
See All in Programming
GoのIteratorに詳しくなってしまう
inatonix
1
200
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
Modern Angular with the NGRX Signal Store New Rules for Your Architecture @BASTA! 2024 in Mainz
manfredsteyer
PRO
0
150
Regular Expressions, REXML, Automata Learning
makenowjust
0
220
Kotlin 2.0 and Beyond
antonarhipov
2
150
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
660
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
あなたのアプリ、ログはでてますか?あるいはログをだしてますか? (Funabashi.dev用 軽量版)
uzulla
2
120
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
470
Featured
See All Featured
Done Done
chrislema
180
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Producing Creativity
orderedlist
PRO
340
39k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
Design by the Numbers
sachag
277
19k
How to name files
jennybc
75
98k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Code Reviewing Like a Champion
maltzj
517
39k
A Tale of Four Properties
chriscoyier
155
22k
Infographics Made Easy
chrislema
239
18k
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