Înțelegerea conductei de active Rails

Ruby on Rails este un cadru de dezvoltare web complet scris în Ruby. Pentru un dezvoltator care tocmai a început să lucreze cu Ruby on Rails, multe lucruri se vor simți magice, cum ar fi variabilele de instanță definite în controler accesibil de vizualizări. Un alt astfel de lucru este pipeline-ul de active, dar creează haos uneori, mai ales când se mută lucrurile în producție. O simplă căutare pe google ar oferi o soluție la acel moment, dar nu s-ar părea completă. Această postare vă va oferi o înțelegere mai bună despre pipeline de active Rails, astfel încât să nu vă simțiți blocat cu ea data viitoare.

Rails Asset Pipeline

Codul scris în folderele aplicație/active și furnizor/activ reprezintă cea mai mare parte a front-end-ului în orice aplicație Ruby on Rails. Orice Javascript sau CSS pe care îl scriem în acest folder este compilat și minimizat înainte de a fi transmis browserelor aflate în producție. Toate acestea sunt îngrijite automat de canalul de active care este livrat împreună cu Rails în mod implicit. Această conductă de active este implementată de bijuteria pinioane-șine. De asemenea, ne permite să scriem materiale într-o limbă diferită sau pre-procesoare și să le compilăm în CSS și Javascript ușor de înțeles de browser.

O aplicație Ruby on Rails la momentul creării este dată cu două fișiere manifest application.js și application.css. Aceste două fișiere conțin în mod implicit câteva rânduri de cod semnificativ care sunt considerate obligatorii. Să aruncăm o privire la conținutul acelor fișiere și să încercăm să ne dăm seama pentru ce sunt.

Fișiere manifest

/*
* Acesta este un fișier manifest care va fi compilat în application.css, care va include toate fișierele
* enumerate mai jos.
*
* Orice fișier CSS și SCSS din acest director, lib/assets/stylesheets, vendor/assets/stylesheets,
* sau furnizorul/activele/ foile de stil ale pluginurilor, dacă există, pot fi referite aici folosind o cale relativă.
*
* Sunteți liber să adăugați stiluri la nivelul aplicației la acest fișier și acestea vor apărea în partea de sus a fișierului
* fișier compilat, dar este, în general, mai bine să creați un fișier nou pe stil.
*= require_self
*= cere_tree .
*/

Acesta este fișierul manifest CSS implicit, care include toate fișierele menționate într-un singur fișier application.css. Cuvântul cheie require aici funcționează la fel ca și cuvântul cheie require în ruby. Face un fișier accesibil în fișierul din care este apelat. Cuvântul cheie require caută mai întâi fișierele menționate în folderul app/assets/, dacă nu este găsit acolo, va căuta în folderul vendor/assets/.

„require_self” și „require_tree”.

'require_self' încarcă tot conținutul acelui fișier de unde este apelat, în cazul nostru application.css în linia în care este menționat. 'require_tree .' încarcă tot conținutul în același folder în care este referit în linia în care este menționat. Dacă trebuie să includem toate fișierele unui subdosar, folosiți „require_tree ./folder_name/”. Acest lucru este util atunci când utilizați CSS simplu. Dar dacă vrem să folosim SASS/SCSS, să folosim variabile globale pentru culori etc., trebuie să importam fișierul CSS folosind metoda SCSS `@import`, mai degrabă decât `require`.

Căile activelor

Nu există nicio diferență mare între aplicație/active și folderul furnizor/activ. Prin convenție, se recomandă utilizarea dosarului aplicație/activ pentru fișierele CSS și Javascript personalizate pe care le creăm și folderul furnizor/activ pentru CSS și Javascript al oricăror pluginuri terțe.

Ordinea în care sunt căutate activele este următoarea:

/app/assets/images

/app/assets/javascripts

/app/assets/stylesheets

/vendor/assets/images

/assets/javascripts

/assets/stylesheet

/[active incluse de pietre prețioase]

Precompilarea activelor

Pentru a compila toate fișierele și a le minimiza, ar trebui să rulăm rake assets:precompile. Această comandă inițiază o sarcină rake care găsește fișierele menționate în application.css, dacă sunt scrise în SCSS/SASS, este compilată în CSS și apoi adăugată ca parte a fișierului application.css. Acest fișier application.css este legat de fiecare pagină folosind eticheta de link foaia de stil, un ajutor pentru vizualizarea șinelor. Același lucru se întâmplă și cu application.js.

În mod implicit, numai application.css și application.js sunt fișierele manifest și, prin urmare, sunt precompilate. Dar am putea dori să folosim unul sau mai multe fișiere ca fișiere manifest pentru diferite aspecte. În acest caz, aceste fișiere ar trebui adăugate la matricea de precompilare la config/initializers/asset.rb

Rails.application.config.assets.precompile += ['dashboard.js', 'dashboard.css']

Aici, împreună cu fișierele application.css și application.js, fișierele dashboard.css și dashboard.js sunt considerate manifeste. Deci, în timpul precompilării, aceste fișiere sunt, de asemenea, precompilate. După precompilare, aceste fișiere nou generate sunt plasate în folderul public/assets.

cerere-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css

aplicație-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js

cerere-8cf9a6a42ecd8238b5d928c5ad7b4f4b440061daa2da0a0fe2016c7e92c9d955.css.gz

aplicație-ca682b893b6c32b8d053913db011cb78977866d8d1d6d95cf676e804adef35da.js.gz

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

folderul public/assets

Acesta este al treilea dosar în care putem găsi active într-o aplicație de șine, dar adăugarea de active aici direct nu este încurajată decât dacă este un activ static și nu se schimbă deloc. De asemenea, nu vom putea face referire la niciun fișier plasat sub acest folder folosind ajutoarele pentru url-uri. Activele sunt, în general, precompilate numai în mediul de producție. Dacă doriți să precompilați activele în local, rulați rake assets:precompile RAILS_ENV=producție în local.

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css

dashboard-fb0bd7de7060c10f28a74d784f046a519ef3b170645b00ee91a66953dc686554.css.gz

Dacă aruncați o privire la numele fișierelor de mai sus, acestea au atașate aleatoriu 64 de caractere. Acest proces se numește amprentă, ceea ce face ca întregul nume de fișier să depindă de conținutul fișierului. Această tehnică este foarte utilă în stocarea în cache a activelor. Dacă conținutul fișierului rămâne același, numele fișierelor va rămâne, de asemenea, același, prin urmare poate fi stocat în cache. Dacă conținutul se modifică, numele se schimbă și cache-ul la fel.

Sass Asset Url Helpers

Ori de câte ori punem niște fonturi, imagini în folderul aplicație/activ, apoi încercăm să le accesăm din fișierele CSS, SCSS, va funcționa bine în dezvoltare. Dar de cele mai multe ori se întrerupe în producție spunând resursa nu a fost găsită /assets/bg-image.jpg. Acest lucru se întâmplă în special pentru pachetele de fonturi pe care le includem. Acest lucru se datorează faptului că am fi dat așa ceva pentru imaginea de fundal

imagine de fundal: url('/images/header_background.jpg');

În producție, va încerca să obțină imaginea din /images/header_background.jpg. Dar nu vor exista fișiere prezente în folderul public numit „header_background.jpg” decât dacă plasăm fișierul în directorul public. În mod normal, le-am plasa în aplicație/active sau furnizor/active. Deci, în timpul precompilării, va fi compilat și amprenta digitală va fi adăugată la toate activele fără js/CSS. Prin urmare, toate fișierele de imagine, fișierele cu fonturi vor purta amprente digitale în numele lor și acest lucru nu va funcționa.

header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png logo-ul companiei-ad045423017cb12f23b6c2ccb7860f0cb78630bcb786423017cb12f23b6c2ccb78630bcb78630bcb780423017

Fișierele sunt compilate și adăugate așa cum se arată mai sus în folderul public. Deci, pentru a face referire la acest lucru în CSS, trebuie să folosim ajutoare pentru calea activelor furnizate de șine. În loc de „url('/images/header_backgroung.png')', utilizați „image-url('header_background.png')'. După precompilare, acesta va fi adăugat văzut ca

imagine de fundal: url('/images/header_background-5c2d30983dca95c015dda3f0a581ff39e9dbef809ec6290d1f8a771cc6a42e2b.png');

Sper că această postare te-a ajutat să știi despre pipeline de active Rails. O mai bună înțelegere a pipelinei de active vă va ajuta să păstrați codul legat de front-end mai organizat și mai ușor de întreținut. Dacă doriți să explorați mai multe despre pipeline de active, aici este linkul pentru ghidul oficial.

Rămâneți la curent cu următorul nostru articol pentru a afla dacă aveți datele potrivite pentru Analiza sentimentelor

Plănuiți să achiziționați date de pe web? Suntem aici pentru a vă ajuta. Anunțați-ne despre cerințele dvs.