Estrutura: app/assets
O curso examina a pasta app/assets/ de um projeto Rails que usa Propshaft, Tailwind e import maps. Ele parte das linhas do layout que carregam CSS e JavaScript e segue cada uma até seus arquivos. Trata do arquivo fonte do Tailwind e dos tokens de design do @theme, do build que gera app/assets/builds/tailwind.css e do fingerprint que o Propshaft aplica às imagens com um hash do conteúdo. Também traça a fronteira entre app/assets/ e app/javascript/, roda o build e inspeciona os load paths do Propshaft.
O que você vai aprender
- ✓O que cada pasta de app/assets/ guarda e por quê
- ✓Como os tokens do @theme no application.css viram utilitários do Tailwind
- ✓Como tailwindcss:build e tailwindcss:watch geram o builds/tailwind.css
- ✓Como o Propshaft aplica fingerprint para o navegador não usar cópias velhas do cache
- ✓Onde app/assets/ termina e app/javascript/ começa, e o papel do import map
- ✓Como inspecionar a saída do build e os load paths do Propshaft
O que app/assets/ guarda neste projeto
O layout deste projeto, app/views/layouts/application.html.erb, tem estas três linhas no <head>:
Ler a aula completa grátis →Currículo
7 aulasO que app/assets/ guarda neste projeto
Apresenta as três pastas de app/assets/ e as linhas do layout que carregam CSS e JavaScript.
app/assets/tailwind/application.css: o ponto de entrada do CSS
Lê o ponto de entrada do Tailwind, onde o @import traz utilitários e o @theme define os tokens de design.
Da fonte ao navegador: o build do Tailwind
Mostra como o tailwindcss:build e o observador do Procfile.dev geram o builds/tailwind.css, e por que o Git o ignora.
app/assets/images/ e o fingerprint do Propshaft
Explica como o Propshaft põe um digest SHA1 do conteúdo no nome do arquivo para evitar imagens velhas do cache.
A fronteira: app/assets vs app/javascript
Separa app/assets/, com CSS e imagens, de app/javascript/, com controllers Stimulus e o import map.
Rodando o pipeline de assets
Roda o build do Tailwind, inspeciona os load paths do Propshaft e mostra qual gem cuida de cada parte.
Juntando tudo: app/assets, de ponta a ponta
Segue as duas linhas do layout até seus arquivos fonte, gems e pastas, de ponta a ponta.