Share
Ved slutten av denne artikkelen bør du ha en god forståelse av egenskapene til Asset Pipeline i Rails at nybegynnere vanligvis har en vanskelig tid med. Du vil også ha en god innledende forståelse av kompilering, fingeravtrykk, caching, minifisering og komprimering. Rørledningen gir deg mye kjørelengde, og en god forståelse av hvorfor er like viktig som å kjenne sine funksjoner.
Assetrørledningen i Rails håndteres av hjul-skinnene perle. Som standard er den aktivert når du oppretter et nytt Rails-program. Sprockets er et Ruby bibliotek og hjelper deg med å administrere JavaScript og CSS eiendeler.
På toppen av det tar det vare på å kompilere samt preprocessing på høyere nivå språk som Sass, SCSS og CoffeeScript. Forbehandling betyr ganske enkelt at stilene dine, HTML eller JavaScript blir generert etter at du har skrevet kode på et annet språk. For eksempel blir Sass-stilarkene forhåndskompilert til gyldig CSS. Siden nettlesere ikke kan forstå ting som CoffeeScript, må vi preprocesse det først.
Det er tre edelstener som spiller en viktig rolle i alt dette:
Accentsconagua
kaffe-skinneruglifierSass-skinneneSass-skinnene lar deg skrive din Sass smak av valg for å lage ditt CSS, kaffe-skinner gir deg et bedre syntaks for å skrive JavaScript, og uglifier komprimerer i sin tur disse eiendelene. Forresten, Sass-skinnene har ansvaret for å komprimere CSS-filer selv. Alle tre edelstener vil bli lagt til Gemfile automatisk når du oppretter en ny Rails-app. Hvis du har en grunn til ikke å bruke Sprockets with Rails, kan du hoppe over den fra kommandolinjen når du starter din app:
skinner nytt appnavn - skip-tannhjul
Denne kommandoen forhindrer at de ovennevnte edelstenene blir lagt til Gemfile og gir deg en annen versjon av config / application.rb fil. Nå må du sette opp din egen løsning for å håndtere dine eiendeler.
Når du forhåndsbehandler noe som CoffeeScript i gyldig JS, eller Sass i CSS, har du også muligheten til å behandle disse filene litt mer. Minifisering og komprimering er de to store. Minifisering blir kvitt ting nettleseren bryr seg ikke om-hvitt mellomrom og kommentarer er gode kandidater, for eksempel. Sass kan også handle direkte med minifisering også. Eller du bruker bare Rails-standarden på YUI-kompressoren når du arbeider med stilark. På samme måte som Rides, lar du deg selv skrive og konfigurere din egen tilpassede kompressor.
Jeg bør nevne at Sass har en komprimert versjon av utmatingsstil. Dette er faktisk forvirrende siden det er å redusere stilarkene dine. Komprimering er en annen prosess og reduserer filstørrelsen betydelig mer. Komprimering, eller gzipping, retter seg mot repeterende biter av koden og erstatter dem med pekere som tar opp mindre plass. Så jo mer repetitive dine ressursfiler, jo mer blir de komprimert og redusert i størrelse.
Minifisering er ganske fin, men du vil se de største filstørrelsesreduksjonene når du bruker gzipping. Det er ikke sjelden å se at filene krympes til 14% av originalstørrelsen hvis du både reduserer og komprimerer dem. Når du tenker på å laste ned tonnevis av eiendeler over tregere nettverk, kan dette være en stor fordel.
For produksjon må dine eiendeler først kompileres. Filer du legger inn app / eiendeler Vanligvis må de forhåndsbehandles før de kan serveres. Hva snakker vi om her? La oss si at du har jobbet på noen ny app som fungerer på din lokale server. Dine Sass-filer og din CoffeeScript-flavored JavaScript virker magisk ut av boksen. Cool, men hva skjer hvis du vil presse dette til en produksjonsserver? En slik server, ansvarlig for å levere dette innholdet til et muligens større publikum, har noen forskjellige krav enn din lokale server.
Som standard vil Rails se etter filer som er navngitt applikasjon og prøv å forkompilere dem for deg. I dette trinnet blir ressurser sammensatt fra høyt nivå språk som Sass til CSS, og de er sammenkoblet - fra flere filer til færre bunter av filer. Å ha så få filer som mulig, er gunstig for ytelse og fart. Komprimering av størrelsen til deres bare minimum er også av enorm betydning, spesielt for større applikasjoner. På toppen av alt er også filer cached. Det betyr at du bare laster inn nye eiendeler når de er endret på slutten.
Du har to alternativer til hvor du vil kompilere dine eiendeler. Du kompilerer på produksjonsserveren din eller lokalt. Lokal kompilering betyr at du utfører denne prosessen på din egen maskin først og deretter presser den til produksjon. Dette har fordelene at du ikke trenger skriveadgang til filsystemet på en produksjonsserver, og hvis du distribuerer til flere servere, kan du bare gjøre denne prosessen bare én gang. Ikke trenger å forkompilere dine eiendeler på serveren hvis distribuerte endringer ikke inkluderer eiendomsendringer, er en annen fordel med å forkompilere lokalt.
Forkompilering av eiendeler er en av disse tingene vi må gjøre før vi sender dem vår "rene", kompilert CSS, HTML og JS. Servere burde sannsynligvis ikke trenger å vite om hvordan man skal håndtere høyt nivå språk som Sass, Slim, og whatnot. De har nok ansvar allerede. For at det skal fungere, er du ansvarlig for at komprimerings- og minifiseringsdelene er klare på maskinen din. Du kan sette disse kompilerte eiendelene i Git repo-eller hvilket som helst versjonskontrollverktøy du foretrekker - og distribuere bare disse endelige eiendelene til produksjon.
Rails gir deg en Rake-oppgave som tar seg av forkompilerende eiendeler, skjønt. En slik oppgave er bare en rekke forhåndsdefinerte trinn som utføres for å oppnå et bestemt mål. Bruke Rake-byggverktøyet for slike ting er svært vanlig i Ruby land. Du kan enkelt skrive dine egne oppgaver i Rake selv. Rails gjør dette veldig enkelt. Ut av boksen kommer Rails med lib / oppgaver katalog hvor du enkelt kan parkere Rake-oppgaver. Ingen videre oppsett nødvendig. Så når du kjører:
rake-eiendeler: forkompilere eller bunte-eksek-rake-eiendeler: forkompilere
Sprockets vil ta de eiendelene det kan finne i sin søkebane og preprocess eller kompilere dem inn i offentlige / eiendeler. Utgangen vil se slik ut:
your_rails_app / offentlig / assets / program 454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js your_rails_app / offentlig / assets / program 454840c9c54adb8be789d8ca014fa0a02022a5dcd00523f2dd0469bc990ed0e6.js.gz your_rails_app / offentlig / assets / program e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css your_rails_app / offentlig / assets / søknad-e80e8f2318043e8af94dddc2adad5a4f09739a8ebb323b3ab31cd71d45fd9113.css.gz
Når du vil kompilere lokalt, anbefales det å endre plasseringen der Rails utdataer dine eiendeler. Hvis du ikke gjør det, trenger du å kompilere eiendeler for utvikling fordi du ikke ville se lokale endringer uten det. Den endrede nettadressen vil bli brukt av Sprockets for å betjene dine eiendeler i utviklingsmodus.
config.assets.prefix = "/ dev-assets"
For produksjon vil de sammensatte filene fortsatt bli plassert i en /eiendeler katalog som standard.
Du kommer til å ende opp med enkeltverdier, aka manifesterte filer som application.js og application.css. På den måten trenger du ikke å manuelt koble til alle dine eiendeler ved hånden i oppslaget ditt og unngå å måtte laste flere aktivfiler i stedet for en for hver kategori.
Det lange nummeret du ser det er vedlagt kalles fingeravtrykk. Det brukes til å sammenligne filer og se om innholdet deres kan ha endret seg før de må bufres på nytt. Det du også kan se er at du får to versjoner av samme fil. Den ene med .gz filtillegg er den gzipped versjonen av eiendelene. gzip brukes til filkomprimering og dekomprimering og å kutte bort litt av fettet som vi ikke vil ha sendt over ledningen. En annen forbedring for å øke hastigheten, i utgangspunktet.
Hvis du føler behov for å forhåndskompilere dine eiendeler på en produksjonsserver, vil følgende kommando nedenfor opprette eiendommene direkte på serveren din. Jeg legger imidlertid bare til dette for fullstendig skyld. Jeg er ikke sikker på at du vil ha mye behov for dette som nybegynner akkurat nå.
RAILS_ENV = produksjonsboks / rails-aktiver: forkompilere
Disse manifesterer filer som application.css inkludere logikken for å importere alle filene i søkeveien. Rails importerer disse delene først og kompilerer dem deretter i en enkelt autoritativ fil som nettleseren vil bruke. Det er bare en standard, og du kan selvfølgelig endre det.
Hver manifestfil har direktiver, som er instruksjoner som bestemmer hvilke filer som må kreves for å bygge opp disse manifestfilene. Ordren der de blir importert, bestemmes også der.
Det endelige resultatet inneholder alt innholdet i alle filene direktene har tilgang til. Sprockets laster disse filene, gjør den nødvendige preprocessing, og runder hele greia av ved å komprimere resultatet. Ganske darn nyttig!
For CSS-manifestfilen din, app / assets / stilark / application.css, dette ser ut som følgende:
/ * ... * = require_self * = require_tree. * /
JavaScript-ekvivalenten, app / eiendeler / Javascript / application.js, ser ut som:
// ... // = krever jquery // = krever jquery_ujs // = require_tree .
Som du kan se fra dette eksempelet, er det nødvendig å kreve jQuery først hvis du stole på det i JavaScript-koden din.
Rails oppretter som standard et fingeravtrykk for hvert filnavn under forkompileringsprosessen. Mer spesifikt skaper Sprockets en MD5 hash fra filens innhold. Den resulterende heksadesimale streng på 32 tegn, også en fordøyelse, festes da til filnavnene dine.
Det betyr at hvis innholdet i filene dine endres, vil filnavnene dine, MD5-hashdelen, også bli endret. Hvorfor kalles det fingeravtrykk? Slike hash har en svært stor sannsynlighet for å være unik og kan derfor brukes til å identifisere en fils unikhet - akkurat som fingeravtrykk.
navbar-908e25f4bf641868d8683022a5b62f54.css
Vi snakker ikke om en randomisert heksadesimal streng. Innholdet i filene skyves gjennom en matematisk funksjon som konverterer den til en unik 32-tegnsekvens. Det betyr at du får det samme hakkede resultatet når du bruker funksjonen til det samme innholdet to ganger - eller hvor ofte du vil.
Gjennom den klare mekanismen er det mulig å sjekke for endringer og bare oppdatere filer som vil resultere i en annen MD5-hash. For caching er dette gylden. Hvis ingenting har endret seg, er det cachet av nettleseren for fremtidige forespørsler. I den sammenheng betyr cache-busting ganske enkelt at eksterne klienter vil be om en ny kopi av en fil fordi fingeravtrykket er endret. Selvfølgelig vil et nytt fingeravtrykk opprettes og legges til filnavnet til aktiva.
MD5 ("Den raske brune ræven hopper over den dovne hunden")9e107d9d372bb6826bd81d3542a419d6
Du kan deaktivere fingeravtrykk både for produksjon og utvikling:
config.assets.digest = false
config.assets.digest = false
La oss ikke glemme hvorfor det er fint å ha Asset Pipeline. Det tar sikte på å gjøre det enkelt for deg å håndtere eiendeler. Å skrive stiler og atferd for apper har blitt stadig mer nyanserte og komplekse. Noen av verktøyene har også blitt mer gledelige å jobbe med. Å forberede eiendeler til produksjon og betjene dem, bør være minst litt mer trivielle og spare deg litt tid.
Å ha litt automatisering og konvensjoner for å organisere eiendeler er virkelig hyggelig fordi det gjør din egen jobb lett underveis. Asset pipeline til og med søtsaker avtalen og runder ting med noen få sukkerholdige eiendeler lenker. Dette gjør det til en blast for å håndtere eiendeler i koden din. La oss se på noen av de vanlige mistenkte som forhåpentligvis øker ditt lykke nivå enda mer:
javascript_include_tagstylesheet_link_tagIMAGE_TAGSiden utvinningen har Sprockets ikke endret måten du kan koble til dine eiendeler; det fungerer fortsatt det samme som før. Eksemplene ovenfor er bekvemmelighetsmetoder som tar navnet på dine eiendeler som argumenter. De finner deretter utvidelsesnavnene for korrelerte filer selv. Disse hjelpemetodene skaper ikke bare de nødvendige kodene for riktig HTML, men sørger også for å koble til aktivfilene. De er ikke obligatoriske, selvfølgelig, men fortsatt hyggelig å ha og veldig lesbar også. Det er litt mindre rot i markeringen din hvis du bruker dem.
<%= stylesheet_link_tag "some-stylesheet", media: "all" %> <%= javascript_include_tag "some-js-file" %> <%= image_tag "some-image.png" %>
I din globale layoutfil gir Rails deg tre av dem ut av esken.
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => ekte%> <%= javascript_include_tag 'application', 'data-turbolinks-track' => ekte%> <%= csrf_meta_tags %>
Dette resulterer i følgende utdata i gjengitt HTML:
La oss se nærmere på hvordan du håndterer bildeaktiver.
Bilder plassert i offentlige / eiendeler / bilder katalog kan nås via denne bekvemmelighetsmetoden - du trenger ikke å snikle rundt med stinavn selv. Dette er et godt eksempel på "konvensjon over konfigurasjon" på jobb.
<%= image_tag "some-image.png" %>
Det ville resultere i følgende:
Hvis aktivert, vil Sprockets betjene slike filer hvis de er funnet. Når en fil som noen-image.png er fingeravtrykk, som noen-image-9e107d9d372bb6826bd81d3542a419d6.png, det blir behandlet på samme måte.
Hvis du trenger andre kataloger innenfor offentlige / eiendeler / bilder eller innenfor app / eiendeler / bilder å organisere bildene dine, kanskje noe ekstra for ikoner eller svg filer, Rails har ikke noe problem å finne dem. Du må bare legge til katalogets navn først:
<%= image_tag "icons/some-icon.png" %> <%= image_tag "svgs/some.svg" %>
Se, ingen rakettvitenskap, og de andre ressurshjelpene håndteres på samme måte.
Asset Pipeline er satt opp for å evaluere ERB-koden fra farten. Alt du trenger å gjøre er å legge til .erb utvidelse til en fil og du er god å gå-Sprockets vil ta vare på resten. Når du genererer kontroller, vil det også skape visninger som allerede har .erb forlengelse. Det samme gjelder for stillas.
Men dette fungerer også for stilark. Du kan forbedre dem ved å bruke ERB i dem. Du oppretter bare noe som example.css.erb filer. Jeg er ikke sikker på om det er en mye brukt teknikk, skjønt. Det kan være veldig nyttig, men jeg vil nok være forsiktig med å overbruke dette siden du kan ta det veldig langt. Disse dynamiske CSS-filene skal sannsynligvis ikke inneholde for mye logikk. Det føles som en kode lukt, men skaden synes å være inneholdt hvis du stole på ERB-hjelpere for det meste.
.noen klasse bakgrunnsbilde: url (<%= asset_path 'some-image.png' %>)
Dette bildet vil bli funnet hvis du har det i en av belastningsbanene til Asset Pipeline-vanligvis et sted under app / eiendeler / bilder. Den kule tingen er, hvis denne filen allerede er behandlet og fingeravtrykk, vil Sprockets bruke banen offentlige / eiendeler og finn den der. Det samme gjelder for andre typer eiendeler selvfølgelig. Ikke glem å bruke <%= %>, <% %> å interpolere Ruby-kode der inne. Det vil ikke fungere uten dem. Under forkompilering vil Sprockets interpolere koden som brukes i CSS- eller Sass-filene og utdatasiden .css filer igjen - med eller uten fingeravtrykk i henhold til innstillingene dine, selvfølgelig.
Nedenfor er noen flere alternativer som kan komme til nytte for å koble til ulike aktivakategorier:
asset_pathASSET_URLIMAGE_PATHimage_urlaudio_pathaudio_urlfont_pathfont_urlvideo_pathvideo_urlForskjellen mellom disse søskenene er at _url versjon gir deg hele banen, som http://example.com/assets/application.css, mens _sti versjonen oversetter til den relative banen til en ressurs, som /assets/application.css.
Når du bruker Sass-skinnene perle, du kan også gjøre bruk av sti og url hjelpere for dine eiendeler. De er en no-brainer virkelig. Det er så enkelt som dette:
.enklassisk (bakgrunnsbilde: eiendomsvei ("litt-image.png"); .some-class bakgrunnsbilde: asset-url ("some-image.png"); .Some-class bakgrunnsbilde: bilde-sti ("litt-image.png"); .some-class bakgrunnsbilde: image-url ("some-image.png"); Legg merke til at disse hjelperne bruker en bindestrek (-) og ikke et understrek (_).
bilde-banen ( "noen-image.png") oversetter til "/Assets/some-image.png". image-url ( "noen-image.png") vil utvide til url (/assets/some-image.png)-som i sin tur oversetter til hele nettadressen, som "http://www.example.com/assets/some-image.png". Det samme gjelder ressurs-banen, selvfølgelig.
Interessant, denne perlen tilbyr også sin egen smak av andre eiendomshjelpere fra Rails. Det betyr at du ikke trenger å bruke .erb filer og gjør <%= %> interpolasjoner i stilarkene dine. Du bruker bare disse ressurshjelpene fra Sass-skinnene, som føles litt mer elegant etter min mening. Også, mindre kode-stinkende.
ressurs-banenressurs-urlbilde-baneimage-urlaudio-banenaudio-urlfont-banefont-urlvideo-banenvideo-urlDisse hjelpemetodene vet nøyaktig hvor du skal finne eiendelene dine - hvis du legger dem i den konvensjonelle katalogen, søkeveien i utgangspunktet. Forskjellen mellom sti og url er at du har relative veier og en absolutt sti. En rask påminnelse: En relativ sti er banen til et bestemt fildestinasjon fra en annen filplassering. Absolutt veier gir deg plasseringen i referanse til rotkatalogen.
Asset pipeline ble ekstrahert siden Rails 4 og er ikke en kjernefunksjonalitet lenger. Det er aktivert som standard, men Sprockets er nå ansvarlig for det. Du er fri til å hoppe over det når du starter et prosjekt.
Ved hjelp av rørledningen gjør kapitalforvaltning og kompilering til en bris. Du trenger ikke å sette opp noe og kan fokusere bare på å jobbe med disse eiendelene. Kirsebæret på toppen er at du også får mange praktiske bekvemmelighetsmetoder.
Dine filer til CSS, JS, CoffeeScript, Sass, Haml, Slim, og så videre, er pent organisert på ett sentralt sted, under app / eiendeler. Sprockets er ansvarlig for å betjene filer fra denne katalogen. Filer der inne trenger vanligvis litt forhåndsbehandling, som å snu Sass-filer til deres tilsvarende CSS-filer.
Ved nå vet du det meste av Asset Pipeline-funksjonene at nybegynnere vanligvis har en vanskelig tid å pakke hodet rundt. Mer viktig enn å kjenne sin funksjonalitet alene, er du nå kjent med hvorfor også. Du bør ha en god innledende forståelse av kompilering, fingeravtrykk, caching, minifisering og komprimering. Jeg håper du vil sette pris på hvor mye denne pipeline gjør for deg for å gjøre utviklerens liv litt mer problemfri.
