tot ce trebuie să știți despre conducta Rails Asset

ce este conducta asset?

dacă construiți o aplicație Rails, probabil ați auzit de conducta de active. Conducta de active poate fi considerată ca instrumente și mecanisme prin care fișierele Javascript, foile de stil și imaginile sunt procesate și pregătite pentru utilizare de către browser. Aceste procese pot minifica și comprima activele, precum și activele pre-proces care sunt scrise în alte limbi, cum ar fi Coffeescript sau Sass.

conducta de active a fost creată pentru a rezolva o varietate de probleme legate de activele statice. O astfel de problemă este că fiecare activ specificat separat în marcajul HTML trebuie recuperat separat, rezultând un număr mai mare de solicitări HTTP și, în final, un timp de încărcare mai lung. Fișierele JavaScript și CSS brute pot pierde, de asemenea, o mulțime de lățime de bandă cu comentarii, spațiu alb suplimentar și nume de variabile lungi. O altă problemă care apare implică cache-ul. Când difuzați un fișier Javascript de pe serverul dvs., de exemplu, browserul va memora automat fișierul respectiv pentru o perioadă de timp. Acest lucru îmbunătățește timpul de încărcare a paginii, dar ce se întâmplă dacă acel activ se schimbă la un moment ulterior? Browserul nu va ști despre el, așa că va continua să utilizeze activul din cache până când durata de viață a cache-ului a expirat. În cele din urmă, limbi precum Coffeescript, Sass, Less și Erb au facilitat organizarea și scrierea Javascript și CSS, dar browserul nu le poate interpreta direct, deci este nevoie de un preprocesor pentru a converti aceste fișiere în omologii lor corespunzători înainte de a fi trimise către browser.

conducta de active, în bunăvoința sa, poate rezolva toate problemele de mai sus atunci când este utilizată corect. Se poate compila mai multe active într-un singur, minify și comprima active, oferă digestia activelor pentru a evita problemele de cache, și poate pre-procesa limbi alternative și să le transforme în Javascript și CSS.

acest post acoperă o varietate de subiecte legate de conducta de active:

• elementele de bază ale modului de utilizare a conductei de active
• cele mai bune practici pentru structurarea unde să vă puneți activele
• cum să utilizați matricea precompilă pentru a specifica ce fișiere sunt procesate de conducta de active
• cum pot fi utilizate Sass și Coffeescript
• cum să utilizați metodele Rails asset helper și
• unele gotchas

utilizare de bază

există două moduri de bază care conducta de active este utilizat:

1. când rulați un server în modul de dezvoltare, acesta pre-procesează și pregătește automat activele dvs. din mers.
2. în modul de producție, îl veți folosi probabil pentru a pre-procesa, versiona și comprima și compila activele. Puteți face acest lucru executând următoarea comandă:

1

bundle exec rake assets:precompile

aceasta va crea (implicit) un director assets în folderul public/. Apoi va adăuga toate fișierele comprimate și compilate în acel director, în formatele corespunzătoare și cu noile versiuni digerate. Apoi, puteți configura Nginx sau Apache pentru a server aceste fișiere direct, astfel încât Rails nu trebuie să le livreze (și rula preprocesarea on-the-fly, etc.) în sine.

rețineți că valorile implicite pot fi modificate, deci dacă lucrurile nu funcționează conform așteptărilor, verificați fișierul de configurare a aplicației în config/application.rb. În Rails 4, manipularea activelor este de obicei configurată în config/initializers/assets.rb.

structura fișierului

este important să vă organizați activele într-un mod care vă este ușor de înțeles și facilitează funcționalitatea existentă a conductei de active. Primul lucru pe care ar trebui să-l știți este că toate Javascript-urile personalizate, foile de stil și imaginile ar trebui să intre în directorul app/assets/. În mod implicit, există câte un folder pentru javascripts, stylesheets și images. De asemenea, puteți adăuga fonts, audios și videos în directorul app/assets/ pentru acele tipuri de active. Toate codurile terță parte pe care le utilizați (de exemplu, jQuery, backbone.js, etc.) ar trebui să fie plasate în vendor/assets/ director:

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.

deoarece serverul dvs. web va servi automat fișiere statice din Directorul public/, de ce nu ar trebui să fie plasate acolo toate activele Javascript, imagine și foaie de stil? În primul rând, nimic din folderul public nu va fi pre-procesat, compilat sau comprimat automat, astfel încât, punând active acolo, ocoliți complet conducta de active și pierdeți toate beneficiile sale. Când puneți active acolo, pierdeți, de asemenea, capacitatea de a le referi cu ușurință în codul Rails. Puteți avea o vizualizare, de exemplu, care are următorul cod:

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

în al doilea scenariu (public/images/logo.png), site-ul va funcționa numai dacă este livrat din Directorul de bază. De asemenea, nu poate profita de versiunea conductei de active a fișierului.

Precompilare

s-ar putea să vă întrebați acum dacă tot ceea ce puneți în folderul app/assets/javascripts/ va fi precompilat automat pentru aplicația dvs. Din fericire, conducta de active oferă o modalitate de a specifica ce fișiere sunt compilate și în ce ordine. În mod implicit, aplicație.css și aplicație.js (sau echivalentele lor sass/ coffeescript), împreună cu toate activele non-Javascript, non-CSS sunt incluse. Pentru a include un fișier CSS sau Javascript, altul decât aplicația.css și aplicație.js, trebuie să o solicitați într – unul din cele două moduri:

1. adăugați-l la matricea precompilă din config/initializers/assets.rb (Rails 4) sau fișierul de configurare a aplicației (de exemplu, config/application.rb) sau
2. includeți fișierul în manifestul activului dvs. sau într-unul din manifestul sub-fișierului său.

prima opțiune arată astfel:

12

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

această opțiune este cea mai bună pentru fișierele pe care are sens să le includeți doar pe anumite pagini și nu ar trebui incluse pe altele. De exemplu, dacă aveți o porțiune a site-ului dvs. care va fi utilizată ca widget încorporat iframe, este posibil să doriți ca widget.js și widget.css sau similar să fie utilizate pe pagina respectivă. Aceste fișiere ar trebui să fie adăugate la matrice precompile așa cum se arată mai sus.

a doua opțiune este ceea ce ar trebui folosit de cele mai multe ori și permite compilarea fișierelor Javascript și CSS într-o singură aplicație.js și o aplicație.fișier css. Manifestul este scris în partea de sus a activului aplicabil.

în coffeescript, arată astfel:

12345

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

Manifestul de mai sus va include jQuery, adaptorul scripting discret Rails jQuery (jquery_ujs) și toate fișierele din arborele curent (adică app/assets/javascript/*). Rețineți că require_tree nu compilează activele recursiv prin directoare. Dacă aveți un folder de fișiere pe care doriți să le includeți, va trebui să adăugați și acest lucru la manifest:

1

#= require_tree ./components

o altă directivă manifestă este require_self, care este utilizată pentru a include Javascript-ul fișierului curent în acel moment al lanțului. Cele de mai sus, cu un require_self pot fi scrise într-un fișier .js după cum urmează:

1234567

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

manifestele Sass / CSS folosesc același format de bază, dar cu stilul de comentariu adecvat:

123456

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

rețineți că atunci când utilizați Sass, va trebui să utilizați regula @import pentru a profita de variabile și mixine, deoarece fiecare fișier compilat de manifest are propriul său domeniu de aplicare.

aveți grijă la utilizarea Directivei require_tree. Activele din arbore vor fi incluse în ordine alfabetică, ceea ce înseamnă că, dacă un fișier care începe cu „a” depinde de un fișier care începe cu „z”, puteți întâmpina probleme în care piesele necesare nu sunt disponibile atunci când Javascript este evaluat de browser. Această problemă poate fi evitată prin utilizarea corespunzătoare jQuery(document).ready(), sau window.onload gărzile, prin specificarea o comandă manual, sau să fie prefixarea fișierele cu numere ca 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

amintiți-vă că orice fișier Javascript sau CSS precompilat poate conține un manifest în partea de sus, astfel încât să puteți utiliza fișierele subfolderelor pentru a simplifica Manifestul de nivel superior.

Sass și Coffescript, și Rails Asset Helpers

am menționat Sass și Coffeescript un pic în secțiunile de mai sus, dar nu am intrat încă în ceea ce sunt. Dacă sunteți deja familiarizați cu ele, nu ezitați să treceți la secțiunea „Rails Asset Helpers”.

Sass și Coffeescript

Sass și Coffeescript sunt limbi care folosesc preprocesoare pentru a-și transforma sintaxa în CSS și, respectiv, Javascript. Există mai multe alte limbi preprocesate, cum ar fi Typescript și Less, dar Sass și Coffeescript sunt incluse în mod implicit cu Rails și sunt probabil cele mai populare. Nu voi intra în detalii detaliate aici despre aceste limbi, așa că vă rugăm să consultați linkurile de mai sus pentru mai multe informații.

din experiența mea, în timp ce Sass și Coffeescript oferă o mulțime de zahăr sintactic (caracteristici destul de cod), faptul că excepțiile sunt aruncate pentru codul nevalid în etapa de preprocesare este suficient pentru a justifica utilizarea lor. Coffeescript înfășoară automat codul dvs. pe fișier și adaugă cuvântul cheie var variabilelor dvs. locale, prevenind astfel o mulțime de dureri de cap care se pot întâmpla mai ușor în Javascript vanilla.

de exemplu, următorul cod Coffeescript:

12345

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

este convertit la următorul Javascript:

1234567891011

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

când preprocesorul procesează fișierul, acesta înfășoară automat codul într-o funcție anonimă ((function() {}).call(this)) și adaugă cuvântul cheie var la prima utilizare a state. Rețineți că, dacă doriți să utilizați domeniul global, trebuie să specificați acest lucru prefixând window..

există mult mai mult pentru Coffeescript, dar definirea automată a domeniului a fost extrem de utilă pentru mine personal în prevenirea erorilor greu de găsit.

Rails Asset Helpers

o altă caracteristică excelentă pe care o puteți obține doar folosind Sass în proiectul dvs. Rails este asset path helpers. Când faceți referire la alte active din Sass, puteți utiliza următoarea sintaxă pentru a obține căile corespunzătoare:

123

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

ajutoarele image-path, asset-url și asset-path pot fi de asemenea utilizate. Ajutoarele -urlînfășoară calea cu url().

Erb în active

conducta de active vă permite să evaluați codul erb în activele CSS și Javascript prin sufixarea numelui fișierului cu .erb (de exemplu, application.js.erb sau application.scss.erb). Deși acest lucru poate fi util pentru adăugarea căilor de active la Javascript, în general nu recomand utilizarea acestei funcții. Acesta adaugă un alt pas de preprocesare fișierului, mărind astfel timpul necesar pentru precompilare. De asemenea, poate duce la obiceiuri proaste. S-ar putea să fiți tentat să adăugați cod care nu are sens la momentul compilării, cum ar fi traducerea șirurilor. Aceste șiruri ar fi traduse numai la momentul compilării, negând astfel întregul scop al traducerii lor. Singurul motiv pentru a utiliza Erb într-un fișier Javascript ar trebui să fie de a utiliza asset_path helper așa cum sa discutat în ghid.

Asset Pipeline Gotchas

următoarele sunt câteva gotchas și sfaturi care pot fi utile în dezvoltarea activelor aplicației Rails.

• Cum adaug date globale pentru Javascript-ul meu?
  • gon gem poate fi folosit pentru a insera date cu scop global la pagina pentru Javascript pentru a consuma. Acest lucru este excelent pentru lucruri precum furnizarea ID-ului utilizatorului curent sau a setărilor site-ului.
• unde ar trebui să măresc matricea precompilă?
  • în Rails 4, ar trebui să măriți matricea în config/initializers/assets.rb, iar în Rails 3, ar trebui să faceți acest lucru în config/application.rb. Utilizarea activelor.rb sau aplicație.RB setează matricea precompilă pentru toate mediile, astfel încât, dacă adăugați un mediu (probabil staging), nu va trebui să măriți matricea precompilă special pentru acel mediu nou.
    • active.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • aplicație.rb: config.assets.precompile += %w( widget.js widget.css )
• când ar trebui să precompilez activele separat prin mărirea matricei precompile?
  • acest lucru ar trebui făcut rar. De cele mai multe ori, singurul motiv pentru care doriți să faceți acest lucru este dacă activul este inclus singur pe o pagină specială în care nu doriți restul activelor, cum ar fi un widget încorporat iframe. Utilizați aplicația.js și aplicarea.css manifestă pentru a trage în activele dumneavoastră.
• ar trebui să permit Rails să servească fișiere statice?
  • Da. Aceasta urmează liniile directoare ale aplicației cu doisprezece factori și previne erorile dacă ați uitat să includeți un fișier în matricea precompilă sau dacă ați uitat să precompilați.
  • setați config.serve_static_assets = true în șinele 3 și config.serve_static_files = true în șinele 4.
• cum mă pot asigura că Javascript/CSS-ul meu este bine scris?
  • scrierea Javascript și CSS de înaltă calitate (sau Coffeescript și Sass) poate dura mult timp și experiență, dar un lucru care m-a ajutat foarte mult este utilizarea unui linter). Unele IDE, cum ar fi Sublime Text, au pluginuri care integrează linters. Eu personal folosesc pachetul SublimeLinter. Dacă aveți de gând să scrieți Javascript și CSS vechi, ar trebui să utilizați cu siguranță un linter.
• cum pot schimba directorul în care sunt plasate activele mele precompilate?
  • puteți schimba setarea config.asset.prefixîntr-un alt director, cum ar fi /static.
  • schimbați prefixul activului în development.rb dacă doriți să urmăriți activele precompilate în git pentru utilizare în producție.
  • schimbați prefixul activului la nivel global dacă doriți să utilizați spațiul de nume al căii /assets pentru controlerele dvs.
• Cum pot servi active statice cu Nginx?
  • Directiva nginx de bază ar trebui să arate astfel (consultați secțiunea active Precompilare din Ghidul șinelor pentru mai multe informații):

1234567

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

• ce este manifest.yml sau manifest -.json?
  • manifestul.yml (șine 3)sau manifest -.fișierele json (Rails 4) sunt create automat atunci când precompilați activele cu rake assets:precompile. Acestea conțin informații despre fișierele care urmează să fie utilizate de aplicația dvs.
• ce tipuri de fișiere nu ar trebui incluse în conducta de active?
  • de obicei, veți dori să păstrați fișiere mari (Videoclipuri, un număr mare de descărcări PDF etc.) într-un depozit separat sau într-un manager de fișiere cloud, cum ar fi AWS S3. Fișierele pot fi apoi referite din aplicația dvs., dar nu trebuie să vă îmbogățiți depozitul git.
• Cum pot obține Rails mele 3 active pentru a compila mai repede?
  • folosiți bijuteria turbo-sprockets-rails3.
• pot folosi un CDN (content delivery network) pentru materialele mele?
  • Da! Digest, sau amprenta, sufixat pe fiecare activ le face de lucru mare cu CDN-uri. Configurați CDN-ul pentru a servi materiale din aplicația Rails, apoi setați configurația config.action_controller.asset_host la domeniul corespunzător pentru CDN (de exemplu, config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Vă recomandăm să utilizați variabile de mediu pentru a seta acest lucru: config.action_controller.asset_host = ENV.

înfășurarea acestuia

utilizarea corectă a conductei de active poate îmbunătăți calitatea generală a aplicației dvs. în ceea ce privește performanța, rezistența și curățenia codului. Folosind caracteristicile conductei de active, puteți depăși automat unele dintre cele mai mari probleme legate de codificarea și livrarea activelor statice.