Alt Du Bør Vite Om Rails Asset Pipeline

Hva er asset pipeline?

hvis du bygger En Rails-applikasjon, har du sikkert hørt om asset pipeline. Asset pipeline kan betraktes som verktøy og mekanismer Som Javascript-filer, stilark og bilder behandles og klargjøres for bruk av nettleseren. Disse prosessene kan minify og komprimere eiendeler, samt pre-prosess eiendeler som er skrevet på andre språk som Coffeescript eller Sass.

asset pipeline ble opprettet for å løse en rekke problemer knyttet til statiske eiendeler. Et slikt problem er at hver eiendel som er angitt separat i HTML-markeringen, må hentes separat, noe som resulterer i et høyere antall HTTP-forespørsler og til slutt en lengre lastetid. Raw Javascript og CSS-filer kan også kaste bort mye båndbredde med kommentarer, ekstra mellomrom, og lange variable navn. Et annet problem som kommer opp innebærer caching. Når Du for eksempel serverer En Javascript-fil fra serveren din, vil nettleseren automatisk cache den filen i en periode. Det forbedrer sidens lastetid, men hva om aktiva endres på et senere tidspunkt? Nettleseren vil ikke vite om det, så det vil fortsette å bruke den bufrede ressursen til bufferlivet er utløpt. Til slutt har språk som Coffeescript, Sass, Less og Erb gjort det enklere å organisere Og skrive Javascript og CSS, men nettleseren kan ikke tolke Dem direkte, så en pre-prosessor er nødvendig for å konvertere disse filene til deres passende kolleger før de sendes til nettleseren.

eiendelen rørledningen, i sin velvilje, kan løse alle de ovennevnte problemene når de brukes riktig. Det kan kompilere flere eiendeler i ett, minify og komprimere eiendeler, gi fordøyelse av eiendeler for å unngå caching problemer, og kan pre-prosess alternative språk og gjøre dem Til Javascript og CSS.

dette innlegget dekker en rekke emner relatert til asset pipeline:

• grunnleggende om hvordan du bruker asset pipeline
• beste praksis for strukturering hvor du skal plassere dine eiendeler
• slik bruker du precompile array til å angi hvilke filer som behandles av asset pipeline
• hvordan Sass og Coffeescript kan utnyttes
• slik bruker Du Rails asset helper-metoder, og
• noen gotchas

grunnleggende bruk

det er to grunnleggende måter som aktiva rørledningen brukes:

1. når du kjører en server i utviklingsmodus, det automatisk pre-prosesser og forbereder dine eiendeler on-the-fly.
2. i produksjonsmodus vil du sannsynligvis bruke den til å forhåndsprosessere, versjonere og komprimere og kompilere ressursene dine. Du kan gjøre det ved å kjøre følgende kommando:

1

bundle exec rake assets:precompile

Dette vil opprette (som standard) en assets katalog i mappen public/. Det vil da legge til alle komprimerte og kompilerte filer i den katalogen, i de riktige formatene og med de nye fordøyede versjonene. Du kan da sette Opp Nginx eller Apache til server disse filene direkte, slik At Rails ikke trenger å levere dem(og kjøre på-flyet forbehandling, etc.) seg selv.

Husk at standardinnstillingene kan endres, så hvis ting ikke fungerer som forventet, sjekk programkonfigurasjonsfilen i config/application.rb. I Rails 4 er ressurshåndtering vanligvis konfigurert i config/initializers/assets.rb.

Filstruktur

det er viktig å organisere ressursene på en måte som er forståelig for deg, og forenkler den eksisterende funksjonaliteten til aktiva pipeline. Det første du bør vite er at alle dine tilpassede Javascript, stilark og bilder skal gå i katalogen app/assets/. Som standard er det en mappe hver for javascripts, stylesheets og images. Du kan også legge til fonts, audios og videos i katalogen app/assets/ for disse aktivatypene. All tredjepartskode du bruker (f.eks. jquery, backbone.js, etc.) skal plasseres i katalogen vendor/assets/ :

1234567891011

rails-app/ app/ assets/ images/ # Image assets javascripts/ # Custom Javascript/coffeescript stylesheets/ # Custom CSS/Sass ... vendor/ assets/ javascripts/ # Javascript libraries, etc. stylesheets/ # Vendor themes, javascript library themes, etc.

siden webserveren din automatisk vil servere statiske filer fra katalogen public/, hvorfor skal ikke Alle Javascript -, bilde-og stilarkressurser plasseres der? For det første vil ingenting i mappen public bli forhåndsbehandlet, kompilert eller komprimert automatisk, så ved å sette eiendeler der, går du helt forbi eiendomsrørledningen og mister alle fordelene. Når du legger eiendeler der, mister du også muligheten til å enkelt referere dem i Rails-koden din. Du kan for eksempel ha en visning som har følgende kode:

12345678910

# app/assets/images/logo.png= image_tag('logo')# Outputs something like <img src="/assets/logo-.png" /># public/images/logo.png= image_tag('/images/logo.png')# Outputs something like# <img src="/images/logo.png" />

i det andre scenariet (public/images/logo.png) vil nettstedet bare fungere hvis det leveres fra basekatalogen. Det kan heller ikke dra nytte av ressursrørledningens versjonering av filen.

Precompilation

du kan nå lure på om alt du putter i app/assets/javascripts/ mappen vil automatisk forhåndskompileres for din app. Heldigvis gir asset pipeline en måte å spesifisere hvilke filer som er kompilert, og i hvilken rekkefølge. Som standard, søknad.css og applikasjon.js (eller deres sass / coffeescript ekvivalenter), sammen med alle ikke-Javascript, er ikke-CSS eiendeler inkludert. For å inkludere EN CSS eller Javascript-fil annet enn program.css og applikasjon.js, du må kreve det på en av to måter:

1. Legg det til precompile array i config/initializers/assets.rb (Rails 4) eller din application config-fil (f. eks. config/application.rb), eller
2. Inkluder filen i aktivaets manifest eller en av dens underfilens manifest.

det første alternativet ser slik ut:

12

# In config/initializers/assets.rbRails.application.config.assets.precompile += %w( some-other-file.js even-another.css )

dette alternativet er best for filer som det er fornuftig å bare inkludere på enkelte sider, og bør ikke inkluderes på andre. Hvis du for eksempel har en del av nettstedet som skal brukes som en innebygd iframe-widget, vil du kanskje bare at widget.js og widget.css eller lignende skal brukes på den siden. Disse filene må legges til precompile array som vist ovenfor.

det andre alternativet er det som skal brukes mesteparten av tiden, og lar Javascript-og CSS-filene dine kompileres i ett program.js og en applikasjon.css-fil. Manifestet er skrevet øverst på gjeldende eiendel.

i coffeescript ser det slik ut:

12345

# In application.coffee##= require jquery#= require jquery_ujs#= require_tree .

ovennevnte manifest vil inkludere jQuery, Rails jquery diskret scripting adapter (jquery_ujs), og alle filene i det nåværende treet (dvs. app/assets/javascript/*). Merk at require_tree ikke kompilere eiendeler rekursivt gjennom kataloger. Hvis du har en mappe med filer du vil inkludere, må du legge til det i manifestet også:

1

#= require_tree ./components

et annet manifest-direktiv er require_self, som brukes til å inkludere Den Nåværende filens Javascript på det tidspunktet i kjeden. Ovennevnte, med en require_self kan skrives i en .js fil som følger:

1234567

// In application.js////= require jquery//= require jquery_ujs//= require_tree .//= require_tree ./components//= require_self

sass / CSS manifesterer bruke samme grunnleggende format, men med riktig kommentar stil:

123456

/** In application.css * *= require reset *= require global *= require layout */

Merk at Når Du bruker Sass, må du bruke sin @import regel for å dra nytte av variabler og mixins, da hver fil kompilert av manifestet har sitt eget omfang.

Vær forsiktig med bruken av direktivet require_tree. Eiendeler i treet vil bli inkludert i alfabetisk rekkefølge, noe som betyr at hvis en fil som starter med «a» avhenger av en fil som starter med «z», kan du støte på problemer der de nødvendige delene ikke er tilgjengelige når Javascript evalueres av nettleseren. Dette problemet kan unngås ved å bruke de riktige jQuery(document).ready(), eller window.onload vakter, ved å angi en ordre manuelt, eller prefiks filene med tall som 01_, 02_:

12345

# application.js# Note that the `.js` isn't needed at the end of the filename.##= require subfolder/library#= require subfolder/depends-on-library

Husk at en forhåndskompilert Javascript-eller CSS-fil kan inneholde et manifest øverst, slik at du kan bruke undermapper filer for å forenkle ditt øverste nivå manifest.

Sass Og Coffescript, Og Rails Asset Helpers

jeg har nevnt Sass og Coffeescript litt i de ovennevnte seksjonene, men jeg har ennå ikke gått inn i hva de er. Hvis du allerede er kjent med dem, kan du hoppe over til» Rails Asset Helpers » – delen.

Sass Og Coffeescript

Sass og Coffeescript er språk som bruker preprosessorer til å transformere syntaksen til HENHOLDSVIS CSS og Javascript. Det finnes flere andre preprocessed språk som Typescript Og Less, Men Sass og Coffeescript er inkludert som standard Med Rails, og er trolig den mest populære. Jeg vil ikke gå inn i omfattende detalj her på disse språkene, så vennligst sjekk ut linkene ovenfor for mer informasjon.

fra min erfaring, Mens Sass og Coffeescript gir mye syntaktisk sukker (ganske kodefunksjoner), er det faktum at unntak kastes for ugyldig kode i forbehandlingsstadiet nok til å garantere å bruke dem. Coffeescript bryter automatisk koden din per fil og legger til var søkeordet til dine lokale variabler, og forhindrer dermed mye omfang hodepine som kan skje lettere i vanilla Javascript.

for eksempel følgende Coffeescript-kode:

12345

$ -> $('#element').on 'click', -> state = 'clicked' window.state = 'clicked' console.log 'element clicked'

konverteres til Følgende Javascript:

1234567891011

(function() { $(function() { return $('#element').on('click', function() { var state; state = 'clicked'; window.state = 'clicked'; return console.log('element clicked'); }); });}).call(this);

når forprosessoren behandler filen, brytes koden automatisk i en anonym funksjon ((function() {}).call(this)) og legger til var – nøkkelordet til den første bruken av state. Merk at hvis du vil bruke det globale omfanget, må du angi det ved å prefikse window..

Det er mye mer Å Coffeescript, men den automatiske scoping har vært svært nyttig for meg personlig i å hindre vanskelig å finne feil.

Rails Asset Helpers

En annen flott funksjon som du bare kan få ved å bruke Sass i Rails prosjektet er asset path helpers. Når du refererer til andre eiendeler i Sass, kan du bruke følgende syntaks for å få de riktige banene:

123

.logo { background-image: image-url("logo.png");}

hjelperne image-path, asset-url og asset-path kan også brukes. -url hjelperne bryter banen med url().

Erb I Aktiva

aktiva pipeline lar deg evaluere erb kode I CSS og Javascript eiendeler ved suffiksing filnavnet med .erb (f. eks. application.js.erb eller application.scss.erb). Selv om dette kan være nyttig for å legge til ressursbaner Til Javascript, anbefaler jeg ikke å bruke denne funksjonen. Det legger en annen forbehandling trinn til filen, og dermed øke tiden det tar å forkompilere. Det kan også føre til dårlige vaner. Du kan bli fristet til å legge til kode som ikke gir mening ved kompileringstid, som å oversette strenger. Disse strengene ville bare bli oversatt på kompileringstid, og dermed negere hele formålet med å oversette dem. Den eneste grunnen til å bruke Erb I En Javascript-fil bør være å bruke asset_path helper som omtalt i guiden.

Asset Pipeline Gotchas

følgende er noen gotchas og ting som kan være nyttige for å utvikle Rails-applikasjonens eiendeler.

• hvordan legger jeg til globale data for At Javascript skal brukes?
  • gon-perlen kan brukes til å sette inn globalt omfangsrike data til siden For Javascript å konsumere. Dette er flott for ting som å gi den nåværende brukerens ID eller nettstedinnstillinger.
• Hvor skal jeg øke precompile array?
  • I Rails 4 bør du øke arrayet i config/initializers/assets.rb, og I Rails 3 bør du gjøre det i config/application.rb. Bruke eiendeler.rb eller søknad.rb angir forhåndskompilere matrise for alle miljøer, slik at hvis du legger til et miljø (kanskje staging), trenger du ikke å øke forhåndskompilere matrise spesielt for det nye miljøet.
    • eiendeler.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • søknad.rb: config.assets.precompile += %w( widget.js widget.css )
• Når skal jeg forhåndskompilere eiendeler separat ved å øke den forhåndskompilerte matrisen?
  • dette bør sjelden gjøres. Mesteparten av tiden er den eneste grunnen til at du vil gjøre dette, hvis aktiva er inkludert alene på en spesiell side der du ikke vil ha resten av aktiva, for eksempel en iframe-innebygd widget. Bruk søknaden din.js og søknad.css manifesterer å trekke i dine eiendeler.
• Skal Jeg tillate Rails å betjene statiske filer?
  • Ja. Dette følger Tolv-Faktor app retningslinjer og hindrer feil hvis du glemte å inkludere en fil i precompile array eller hvis du glemte å precompile.
  • Sett config.serve_static_assets = true I Skinner 3 og config.serve_static_files = true i Skinner 4.
• Hvordan kan Jeg sikre At Javascript / CSS er godt skrevet?
  • Skrive Høykvalitets Javascript Og CSS (Eller Coffeescript og Sass) kan ta mye tid og erfaring, men en ting som har hjulpet meg, bruker en linter). Noen Ideer, for Eksempel Sublime Text, har plugins som integrerer linters. Jeg bruker Personlig SublimeLinter-pakken. Hvis du skal skrive vanlig Gammel Javascript og CSS, bør du definitivt bruke en linter.
• Hvordan endrer jeg katalogen der mine forhåndskompilerte ressurser er plassert?
  • du kan endre innstillingen config.asset.prefix til en annen katalog, for eksempel /static.
  • Endre aktivaprefikset i development.rb hvis du vil spore forhåndskompilerte ressurser i git for produksjonsbruk.
  • Endre aktivaprefikset globalt hvis du vil bruke banenavneområdet /assets for kontrollerne.
• Hvordan betjener jeg statiske eiendeler med Nginx?
  • det grunnleggende nginx-direktivet skal se slik ut (se Delen For Kompilering Av Eiendeler i Skinnene for mer informasjon):

1234567

location ~ ^/assets/ { expires 1y; add_header Cache-Control public; add_header ETag ""; break;}

• hva er åpenbart.yml eller manifest-.json?
  • manifestet.yml (Skinner 3) eller manifest -.json (Rails 4) filer opprettes automatisk når du forhåndskompilere dine eiendeler med rake assets:precompile. De inneholder informasjon om hvilke filer som skal brukes av appen din.
• Hvilke typer filer bør ikke inkluderes i asset pipeline?
  • du vil vanligvis beholde store filer(videoer, et stort ANTALL PDF-nedlastinger, etc.) i et eget depot eller i en sky filbehandling, for EKSEMPEL AWS S3. Filene kan da refereres fra appen din, men trenger ikke å bog ned git-depotet ditt.
• Hvordan kan Jeg få Mine Rails 3-eiendeler til å kompilere raskere?
  • Bruk turbo-sprockets-rails3 perlen.
• Kan JEG bruke ET CDN (content delivery network) for ressursene mine?
  • Ja! Fordøye, eller fingeravtrykk, suffikset på hver eiendel gjør dem fungerer bra med CDNs. Sett OPP CDN for å betjene eiendeler fra Rails-appen, og sett deretter config.action_controller.asset_host – konfigurasjonen til riktig domene for CDN (f.eks. config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Jeg anbefaler å bruke miljøvariabler for å sette dette: config.action_controller.asset_host = ENV.

Innpakning

ved å bruke ressursrørledningen på riktig måte, kan du forbedre den generelle kvaliteten på søknaden din når det gjelder ytelse, robusthet og koderengjøring. Ved å bruke rørledningens funksjoner kan du automatisk løse noen av de største problemene knyttet til koding og levering av statiske ressurser.