Everything You Should Know About the Rails Asset Pipeline

What is the asset pipeline?

jos rakennat Rails-sovellusta, olet luultavasti kuullut omaisuusputkesta. Asset putki voidaan ajatella työkaluja ja mekanismeja, joilla Javascript tiedostoja, tyylisivut, ja kuvia käsitellään ja valmistetaan käytettäväksi selaimen. Nämä prosessit voivat minifioida ja pakata varoja sekä esiprosessiin liittyviä resursseja, jotka on kirjoitettu muilla kielillä, kuten Coffeescript tai Sass.

omaisuusputki luotiin ratkaisemaan erilaisia staattisiin omaisuuseriin liittyviä ongelmia. Yksi tällainen ongelma on, että jokainen HTML-merkinnässä erikseen määritelty omaisuuserä on haettava erikseen, jolloin HTTP-pyyntöjen määrä kasvaa ja lopulta latausaika pitenee. Raw Javascript-ja CSS-tiedostot voivat myös tuhlata paljon kaistanleveyttä kommentteja, ylimääräistä valkoista tilaa, ja pitkä muuttuja nimiä. Toinen esiin nouseva asia liittyy välimuistiin tallentamiseen. Kun syötät Javascript-tiedoston palvelimeltasi, selain esimerkiksi tallentaa tiedoston automaattisesti joksikin aikaa. Tämä parantaa sivun latausaikaa,mutta entä jos kyseinen ominaisuus muuttuu myöhemmin? Selain ei tiedä siitä, joten se jatkaa välimuistin käyttöä, kunnes sen välimuistin käyttöikä on päättynyt. Lopuksi, kielet kuten Coffeescript, Sass, Less, ja Erb ovat helpottaneet järjestää ja kirjoittaa Javascript ja CSS, mutta selain ei voi tulkita niitä suoraan, joten esiprosessori tarvitaan muuntaa nämä tiedostot sopiviksi kollegansa ennen kuin ne lähetetään pois selaimeen.

hyödykeputki voi oikein käytettynä ratkaista kaikki edellä mainitut ongelmat. Se voi koota useita varoja yhdeksi, minify ja pakkaa varat, tarjota sulattamalla omaisuuden välttää välimuistiin kysymyksiä, ja voi esikäsitellä vaihtoehtoisia kieliä ja muuttaa ne Javascript ja CSS.

tämä viesti kattaa useita omaisuuseräputkeen liittyviä aiheita:

• the basics of how to use the asset pipeline
• best practices for structuring where to put your assets
• how to use the precompile array to specify what files are processed by the asset pipeline
• how to use Rails asset helper methods, and
• how to use Rails asset helper methods, and
• jotkut gotchat

peruskäyttö

on kaksi perustapaa, joilla omaisuusputkea käytetään:

1. kun suoritat palvelinta kehitystilassa, se automaattisesti esiprosessoi ja valmistelee omaisuutesi lennossa.
2. tuotantotilassa käytät sitä todennäköisesti esiprosessointiin, versiointiin sekä paketointiin ja kokoamiseen. Voit tehdä sen suorittamalla seuraavan komennon:

1

bundle exec rake assets:precompile

tämä luo (oletuksena) assets – kansion public/ – kansioosi. Se lisää sitten kaikki pakatut ja kootut tiedostot kyseiseen hakemistoon, sopivissa muodoissa ja uusilla sulatetuilla versioilla. Voit sitten määrittää nginx tai Apache palvelimelle nämä tiedostot suoraan niin, että Rails ei tarvitse toimittaa niitä (ja ajaa On-The-fly esikäsittely, jne.) itse.

muista, että oletuksia voidaan muuttaa, joten jos asiat eivät toimi odotetusti, Tarkista sovelluksen asetustiedosto kohdasta config/application.rb. Rails 4: ssä omaisuudenkäsittely on tyypillisesti konfiguroitu config/initializers/assets.rb.

tiedostorakenne

on tärkeää järjestää varat itselle ymmärrettävällä tavalla ja helpottaa omaisuusputken olemassa olevaa toimivuutta. Ensimmäinen asia, sinun pitäisi tietää, että kaikki mukautetun Javascript, tyylisivut, ja kuvat pitäisi mennä app/assets/ hakemistoon. Oletusarvoisesti jokaiselle on olemassa kansio javascripts, stylesheets ja images. app/assets/ – hakemistoon voi myös lisätä fonts, audios ja videos näiden omaisuustyyppien osalta. Kaikki käyttämäsi kolmannen osapuolen koodi (esim.jQuery, backbone.js jne.) sijoitetaan vendor/assets/ – kansioon:

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.

koska www-palvelimesi palvelee automaattisesti staattisia tiedostoja public/ – hakemistosta, miksi kaikki Javascript -, image-ja tyylisivut eivät tulisi sijoittaa sinne? Ensinnäkään mitään public – kansiossa ei saada esikäsiteltyä, koottua tai pakattua automaattisesti, joten laittamalla varat sinne ohitat täysin omaisuusputken ja menetät kaikki sen edut. Kun laitat varat siellä, menetät myös mahdollisuuden helposti viitata niihin Oman Rails koodi. Sinulla voisi olla esimerkiksi näkymä, jossa on seuraava koodi:

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" />

toisessa skenaariossa (public/images/logo.png) sivusto toimii vain, jos se toimitetaan perushakemistosta. Se ei myöskään voi hyödyntää asset pipeline versiointi tiedoston.

Esikompilaatio

saatat nyt miettiä, onko kaikki, mitä laitat app/assets/javascripts/ – kansioon, automaattisesti esikäännetty sovelluksellesi. Onneksi, asset putki tarjoaa tapa määrittää, mitkä tiedostot kootaan, ja missä järjestyksessä. Oletuksena sovellus.css ja sovellus.js (tai niiden Sass/coffeescript vastineet), sekä kaikki ei-Javascript, ei-CSS varat ovat mukana. Sisällyttää CSS-tai Javascript-tiedoston muu kuin sovellus.css ja sovellus.js, sinun täytyy vaatia sitä kahdella tavalla:

1. lisää se precompile array in config/initializers/assets.rb (Rails 4) tai sovelluksen config tiedosto (esim. config/application.rb), tai
2. Sisällytä tiedosto omaisuutesi manifestiin tai johonkin sen alitiedostoon manifestiin.

ensimmäinen vaihtoehto näyttää tältä:

12

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

tämä vaihtoehto on paras tiedostoille, jotka on järkevää sisällyttää vain tietyille sivuille, eikä niitä pitäisi sisällyttää muille. Esimerkiksi, jos sinulla on osa sivustostasi, jota käytetään Iframe embedded widget, saatat haluta vain widget.js ja widget.css, tai vastaava, voidaan käyttää kyseisellä sivulla. Nämä tiedostot olisi lisättävä precompile array kuten yllä.

toinen vaihtoehto on, mitä tulisi käyttää suurimman osan ajasta, ja mahdollistaa Javascript-ja CSS-tiedostojen kokoamisen yhdeksi sovellukseksi.js ja yksi hakemus.CSS-tiedosto. Manifesti on kirjoitettu sovellettavan hyödykkeen yläreunaan.

kahvinkeitossa se näyttää tältä:

12345

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

yllä oleva manifesti sisältää jQueryn, Rails jQueryn huomaamattoman skriptaussovittimen (jquery_ujs) ja kaikki nykyisen puun tiedostot (eli app/assets/javascript/*). Huomaa, että require_tree ei käännä varoja rekursiivisesti hakemistojen kautta. Jos sinulla on kansio tiedostoja, jotka haluat sisällyttää, sinun täytyy lisätä, että manifest samoin:

1

#= require_tree ./components

vielä yksi manifestidirektiivi on require_self, jota käytetään nykyisen tiedoston JavaScriptin sisällyttämiseen kyseisessä vaiheessa ketjua. Yllä oleva, jossa require_self voidaan kirjoittaa .js – tiedostoon seuraavasti:

1234567

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

Sass/CSS manifestit käyttävät samaa perusmuotoa, mutta sopivalla kommentointityylillä:

123456

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

huomaa, että kun käytät Sassia, sinun on käytettävä sen @import – sääntöä muuttujien ja mixinien hyödyntämiseksi, sillä jokaisella manifestin kokoamalla tiedostolla on oma soveltamisalansa.

ole varovainen require_tree – direktiivin kanssa. Varat puu sisällytetään aakkosjärjestyksessä, mikä tarkoittaa, että jos tiedosto, joka alkaa ” A ”riippuu tiedoston, joka alkaa” z”, voit törmätä ongelmiin, joissa tarvittavat osat eivät ole saatavilla, kun Javascript arvioidaan selaimen. Tämä ongelma voidaan välttää käyttämällä asianmukaista jQuery(document).ready(), tai window.onload vartijat, määrittämällä käsky manuaalisesti, tai prefixing tiedostot numerot kuten 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

muista, että kaikki valmiiksi käännetty Javascript-tai CSS-tiedosto voi sisältää manifestin yläosassa, joten voit käyttää alikansioiden tiedostoja yksinkertaistamaan ylätason manifestia.

Sass and Coffescript, and Rails Asset Helpers

olen maininnut Sassin ja Coffeescriptin hieman edellä mainituissa kohdissa, mutta en ole vielä mennyt siihen, mitä ne ovat. Jos olet jo perehtynyt niihin, hyppää vapaasti alas ”Rails Asset Helpers” – osioon.

Sass ja Coffeescript

Sass ovat kieliä, jotka käyttävät esiprosessoreita muuntaakseen syntaksinsa CSS: ksi ja JavaScriptiksi. On olemassa useita muita esikäsiteltyjä kieliä, kuten Typescript ja Less, mutta sass ja Coffeescript ovat oletuksena mukana kiskoilla, ja ovat luultavasti suosituimpia. En mene yksityiskohtaisesti täällä näitä kieliä, joten tutustu linkkejä yllä lisätietoja.

kokemukseni perusteella, vaikka Sass ja Coffeescript tarjoavat paljon syntaktista sokeria (pretty code features), se, että poikkeukset heitetään epäkelpoon koodiin esikäsittelyvaiheessa, riittää oikeuttamaan niiden käytön. Coffeescript käärii automaattisesti koodin tiedostoa kohti ja lisää var – hakusanan paikallisiin muuttujiin, mikä estää paljon laajuuspäänsärkyä, joka voi tapahtua helpommin vanilla Javascriptissä.

esimerkiksi seuraava Coffeescript-koodi:

12345

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

muunnetaan seuraavaksi JavaScriptiksi:

1234567891011

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

kun esiprosessori käsittelee tiedostoa, se käärii koodin automaattisesti anonyymiin funktioon ((function() {}).call(this)) ja lisää var – hakusanan ensimmäiseen käyttöön state. Huomaa, että jos haluat käyttää maailmanlaajuista soveltamisalaa, sinun täytyy määrittää se etuliitteellä window..

Coffeescriptissä on paljon muutakin, mutta automaattitarkistus on ollut minulle henkilökohtaisesti erittäin hyödyllinen vaikeasti löydettävien vikojen ehkäisyssä.

Rails Asset Helpers

toinen hieno ominaisuus, jonka voit saada vain käyttämällä Sassia Rails-projektissasi, on asset path helpers. Kun viitataan muihin omaisuuseriin Sass, voit käyttää seuraavaa syntaksia saada tarvittavat polut:

123

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

myös auttajia image-path, asset-url ja asset-path voidaan käyttää. -url auttajat käärivät polun url().

ERB in Assets

the asset pipeline allows you to evaluate erb CSS and Javascript assets by suffixing the filename with .erb (esim. application.js.erb tai application.scss.erb). Vaikka tämä voi olla hyödyllistä lisäämällä voimavara polkuja Javascript, kokonaisuutena en suosittele käyttämään tätä ominaisuutta. Se lisää toisen esikäsittelyvaiheen tiedostoon, mikä lisää aikaa, joka kuluu esikompilointiin. Se voi myös johtaa huonoihin tapoihin. Saatat tuntea kiusausta lisätä koodia, joka ei ole järkevää käännösaikaan, kuten merkkijonojen kääntäminen. Nämä merkkijonot käännettäisiin vasta käännösaikaan, mikä tekisi tyhjäksi koko niiden kääntämisen tarkoituksen. Ainoa syy käyttää ERB: tä Javascript-tiedostossa tulisi olla asset_path Helperin käyttö oppaassa kuvatulla tavalla.

Asset Pipeline Gotchas

Seuraavassa on joitakin gotchoja ja makupaloja, joista voi olla apua Rails-sovelluksen varojen kehittämisessä.

• Miten lisään globaalia dataa JavaScriptiä varten?
  • Gon-jalokivellä voidaan lisätä globaalisti scopattuja tietoja sivulle JavaScriptin kuluttamista varten. Tämä on hyvä asioita, kuten tarjoamalla nykyisen käyttäjän tunnus tai Sivuston asetukset.
• mihin minun pitäisi lisätä esikompile array?
  • raiteilla 4 array pitäisi lisätä config/initializers/assets.rb, ja raiteilla 3 se pitäisi tehdä config/application.rb. Varojen käyttäminen.rb tai sovellus.rb asettaa precompile array kaikille ympäristöille niin, että jos lisäät ympäristön (ehkä staging), sinun ei tarvitse lisätä precompile array erityisesti että uusi ympäristö.
    • vastaavaa.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • hakemus.rb: config.assets.precompile += %w( widget.js widget.css )
• Milloin minun pitäisi precompile varat erikseen lisäämällä precompile array?
  • näin tulee tehdä harvoin. Suurimman osan ajasta, ainoa syy, miksi haluat tehdä tämän on, jos omaisuuserä sisältyy yksin erityinen sivu, jossa et halua loput varat, kuten iframe-upotettu widget. Käytä sovellusta.js ja sovellus.css manifests vetää oman omaisuuden.
• annanko raiteiden palvella staattisia tiedostoja?
  • Kyllä. Tämä noudattaa kaksitoista-Factor App ohjeita ja estää virheitä, Jos olet unohtanut sisällyttää tiedoston esikompile array tai jos olet unohtanut esikompile.
  • Aseta config.serve_static_assets = true kiskoille 3 ja config.serve_static_files = true kiskoille 4.
• Miten voin varmistaa minun Javascript/CSS on hyvin kirjoitettu?
  • laadukkaan JavaScriptin ja CSS: n (tai Coffeescriptin ja Sassin) kirjoittaminen voi viedä paljon aikaa ja kokemusta, mutta yksi asia, joka on suuresti auttanut minua, on Linterin käyttö). Joissakin IDE: issä, kuten Sublime Textissä, on liitännäisiä, jotka integroivat linterit. Itse käytän SublimeLinter-pakettia. Jos aiot kirjoittaa tavallista Javascript ja CSS, sinun pitäisi ehdottomasti käyttää linteriä.
• Miten muutan hakemistoa, johon valmiiksi pakatut varat sijoitetaan?
  • voit muuttaa config.asset.prefix – asetuksen toiseen hakemistoon, kuten /static.
  • vaihda omaisuuserän etuliite kohdassa development.rb, jos haluat seurata GIT: n valmiiksi kasattuja omaisuuseriä tuotantokäyttöä varten.
  • vaihda asset-etuliite globaalisti, jos haluat käyttää /assets polku-nimiavaruutta ohjaimissasi.
• Miten voin palvella staattisia resursseja Nginxillä?
  • nginx-perusdirektiivin tulisi näyttää tältä (Katso lisätietoja kisko-oppaan kokoamista edeltävästä osiosta):

1234567

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

• mikä on ilmeistä.yml tai manifest-.jsonko?
  • manifesti.yml (Rails 3) tai manifest-.JSON (Rails 4) – tiedostot luodaan automaattisesti, kun esikäännät omaisuuseräsi rake assets:precompile: llä. Ne sisältävät tietoa siitä, mitä tiedostoja sovellus käyttää.
• minkä tyyppisiä tiedostoja ei pitäisi sisällyttää omaisuuseräputkistoon?
  • haluat yleensä säilyttää suuria tiedostoja (videoita, suuria määriä PDF-Latauksia jne.) erillisessä arkistossa tai pilvitiedostojen hallinnassa, kuten AWS S3. Tiedostoihin voi sitten viitata sovelluksestasi, mutta sinun ei tarvitse tunkea git-arkistoa alas.
• Miten saan Rails 3 varat koota nopeammin?
  • käytä turbo-sprockets-rails3 jalokiveä.
• Voinko käyttää CDN: tä (content delivery network) omaisuuksilleni?
  • Yes! Digest, tai sormenjälki, joka on liitetty kunkin hyödykkeen tekee niistä toimivat hyvin CDNs. Aseta CDN palvelemaan rails-sovelluksen resursseja ja aseta sitten config.action_controller.asset_host – määritys CDN: n asianmukaiselle toimialueelle (esim. config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Suosittelen käyttämään ympäristömuuttujia tämän asettamiseen: config.action_controller.asset_host = ENV.

pakkaaminen

käyttämällä hyödykeputkea oikein voi parantaa sovelluksesi yleistä laatua suorituskyvyn, kestävyyden ja koodin puhtauden osalta. Käyttämällä asset pipeline ominaisuuksia, voit automaattisesti ratkaista joitakin suurimmista ongelmista, jotka liittyvät koodaus ja tuottaa staattisia omaisuuseriä.