minden, amit tudnia kell a Rails Asset Pipeline-ról

mi az eszköz pipeline?

ha Rails alkalmazást épít, akkor valószínűleg hallott már az eszközfolyamatról. Az asset pipeline olyan eszközöknek és mechanizmusoknak tekinthető, amelyekkel a Javascript fájlokat, stíluslapokat és képeket feldolgozzák és előkészítik a böngésző számára. Ezek a folyamatok kicsinyíthetik és tömöríthetik az eszközöket, valamint a más nyelveken írt előfeldolgozási eszközöket, például a Coffeescript vagy a Sass.

az eszközvezeték a statikus eszközökkel kapcsolatos különféle problémák megoldására jött létre. Az egyik ilyen probléma az, hogy a HTML-jelölésben külön-külön megadott minden egyes eszközt külön kell letölteni, ami nagyobb számú HTTP-kérést eredményez, és végül hosszabb betöltési időt eredményez. A nyers Javascript és CSS fájlok szintén sok sávszélességet pazarolhatnak megjegyzésekkel, extra fehér terekkel és hosszú változónevekkel. Egy másik felmerülő kérdés a gyorsítótárazás. Amikor például egy Javascript fájlt szolgál fel a szerverről, a böngésző automatikusan gyorsítótárazza ezt a fájlt egy ideig. Ez javítja az oldal betöltési idejét, de mi van, ha az eszköz egy későbbi időpontban megváltozik? A böngésző nem fog tudni róla, ezért továbbra is használja a gyorsítótárazott eszközt, amíg a gyorsítótár élettartama le nem jár. Végül az olyan nyelvek, mint a CoffeeScript, a Sass, a Less és az Erb megkönnyítették a Javascript és a CSS szervezését és írását, de a böngésző nem tudja közvetlenül értelmezni őket, ezért előprocesszorra van szükség ahhoz, hogy ezeket a fájlokat megfelelő megfelelőikké alakítsák, mielőtt elküldenék őket a böngészőbe.

az eszközvezeték jóindulatában képes megoldani a fenti problémákat, ha megfelelően használják. Több eszközt össze tud állítani egybe, kicsinyítheti és tömörítheti az eszközöket, biztosítja az eszközök emésztését a gyorsítótárazási problémák elkerülése érdekében, és előfeldolgozhatja az alternatív nyelveket, és Javascript és CSS formátumba fordíthatja őket.

ez a bejegyzés az eszközvezetékkel kapcsolatos különféle témákat ölel fel:

• az alapok, hogyan kell használni a asset pipeline
• legjobb gyakorlatok strukturálása hol tegye az eszközök
• hogyan kell használni az előfordított tömb, hogy milyen fájlokat dolgozza fel az asset pipeline
• hogyan Sass és Coffeescript lehet tőkeáttételes
• hogyan kell használni a Rails asset helper módszerek, és
• néhány gotcha

alapvető használat

az eszközvezeték használatának két alapvető módja van:

1. amikor egy szervert fejlesztési módban futtat, automatikusan előre feldolgozza és előkészíti az eszközöket menet közben.
2. termelési módban valószínűleg az eszközök előfeldolgozására, verziószámozására, tömörítésére és fordítására fogja használni. Ezt a következő parancs futtatásával teheti meg:

1

bundle exec rake assets:precompile

ez (alapértelmezés szerint) egy assets könyvtárat hoz létre a public/ mappában. Ezután hozzáadja az összes tömörített és lefordított fájlt a könyvtárba, a megfelelő formátumokban és az új emésztett verziókkal. Ezután beállíthatja az Nginx-et vagy az Apache-t, hogy közvetlenül kiszolgálhassa ezeket a fájlokat, így a Rails-nek nem kell kézbesítenie őket (és futtatnia kell az on-the-fly előfeldolgozást stb.) magát.

ne feledje, hogy az alapértékek megváltoztathatók, ezért ha a dolgok nem a várt módon működnek, ellenőrizze az alkalmazás konfigurációs fájlját a config/application.rb mezőben. A Rails 4-ben az Eszközkezelés jellemzően config/initializers/assets.rb – ben van konfigurálva.

fájlszerkezet

fontos, hogy az eszközöket érthető módon rendezze, és megkönnyítse az eszközfolyamat meglévő funkcióit. Az első dolog, amit tudnod kell, hogy az összes egyéni Javascript, stíluslapok és képek kell menni a app/assets/ könyvtárban. Alapértelmezés szerint van egy mappa a javascripts, stylesheets és imagesszámára. Az ilyen típusú eszközök fonts, audios és videos könyvtárához hozzáadhatja a app/assets/ könyvtárat is. Minden harmadik féltől származó kód, amelyet használ(pl.js, stb.) a vendor/assets/ könyvtárba kell helyezni:

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.

mivel a webkiszolgáló automatikusan a public/ könyvtár statikus fájljait fogja kiszolgálni, miért ne helyezné oda az összes Javascript, kép és stíluslap kelléket? Először is, a public mappában semmi sem lesz előre feldolgozva, lefordítva vagy tömörítve automatikusan, így az eszközök elhelyezésével teljesen megkerüljük az eszközvezetéket, és elveszítjük az összes előnyét. Amikor eszközöket tesz oda, elveszíti azt a képességét is, hogy könnyen hivatkozhasson rájuk a Rails kódjában. Lehet, hogy van egy nézete, például, amely a következő kóddal rendelkezik:

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

a második forgatókönyvben (public/images/logo.png) a webhely csak akkor működik, ha az alapkönyvtárból érkezik. Nem tudja kihasználni a fájl eszközfolyamatának verziószámozását sem.

Előfordítás

lehet, hogy most azon gondolkodik, vajon minden, amit a app/assets/javascripts/ mappába tesz, automatikusan előfordításra kerül-e az alkalmazásához. Szerencsére az eszközfolyamat lehetőséget ad arra, hogy meghatározza, mely fájlokat fordítja le, és milyen sorrendben. Alapértelmezés szerint az alkalmazás.css és alkalmazás.js (vagy azok sass/coffeescript megfelelői), valamint az összes nem Javascript, nem CSS eszközök szerepelnek. Az alkalmazástól eltérő CSS vagy Javascript fájl beillesztése.css és alkalmazás.js, kétféleképpen kell megkövetelnie:

1. adja hozzá az előfordított tömbhöz a config/initializers/assets.rb (Rails 4) vagy az alkalmazás konfigurációs fájljához (pl. config/application.rb), vagy a
2. tartalmazza a fájlt az eszköz jegyzékében vagy annak egyik alfájl jegyzékében.

az első opció így néz ki:

12

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

ez az opció a legjobb azoknál a fájloknál, amelyeket csak bizonyos oldalakon érdemes felvenni, másokon nem szabad szerepeltetni. Ha például a webhely egy részét iframe beágyazott widgetként fogja használni, akkor csak a widget.js és widget.css vagy hasonló elemeket szeretné használni az oldalon. Ezeket a fájlokat a fentiek szerint hozzá kell adni az előfordított tömbhöz.

a második lehetőség az, hogy mit kell használni a legtöbb időt, és lehetővé teszi a Javascript és CSS fájlokat kell fordítani egy alkalmazás.js és egy alkalmazás.css fájl. A jegyzék az alkalmazandó eszköz tetejére van írva.

a coffeescript-ben így néz ki:

12345

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

a fenti manifest tartalmazza a jQuery-t, a Rails jQuery diszkrét szkriptadaptert (jquery_ujs), valamint az aktuális fa összes fájlját (azaz app/assets/javascript/*). Ne feledje, hogy a require_tree nem fordítja az eszközöket rekurzív módon könyvtárakon keresztül. Ha van egy fájlmappája, amelyet fel szeretne venni, akkor azt is hozzá kell adnia a jegyzékbe:

1

#= require_tree ./components

még egy manifest direktíva a require_self, amelyet arra használnak, hogy az aktuális fájl Javascript-jét a lánc azon pontján tartalmazza. A fentiek require_self – vel .js fájlba írhatók az alábbiak szerint:

1234567

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

a SASS / CSS manifesztek ugyanazt az alapformátumot használják, de a megfelelő megjegyzésstílussal:

123456

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

ne feledje, hogy a sass használatakor a @import szabályt kell használnia a változók és a mixinek előnyeinek kihasználásához, mivel a manifest által összeállított minden fájlnak saját hatóköre van.

legyen óvatos a require_tree irányelv használatával. A fa eszközei betűrendben szerepelnek, ami azt jelenti, hogy ha egy “a” betűvel kezdődő fájl egy “z” betűvel kezdődő fájltól függ, akkor olyan problémákba ütközhet, ahol a szükséges darabok nem állnak rendelkezésre, amikor a JavaScript a böngésző értékeli. Ez a probléma elkerülhető a megfelelő jQuery(document).ready() vagy window.onload őrök használatával, a sorrend manuális megadásával, vagy a fájlok előtagjával, például 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

ne feledje, hogy bármely előre lefordított Javascript vagy CSS fájl tartalmazhat jegyzéket a tetején, így az almappák fájljaival egyszerűsítheti a legfelső szintű jegyzéket.

Sass és Coffescript, and Rails Asset Helpers

a fenti szakaszokban egy kicsit említettem a Sass-t és a Coffeescript-et, de még nem mentem bele, hogy mik azok. Ha már ismeri őket, nyugodtan ugorjon le a “Rails Asset Helpers” szakaszra.

a Sass és a CoffeeScript

a Sass és a Coffeescript olyan nyelvek, amelyek preprocesszorokat használnak a szintaxisuk CSS-re és Javascript-re történő átalakításához. Számos más előre feldolgozott nyelv létezik, mint például a Typescript és a Less, de a Sass és a Coffeescript alapértelmezés szerint a Rails-szel együtt szerepel, és valószínűleg a legnépszerűbbek. Nem megyek bele részletesen itt ezeken a nyelveken, ezért kérjük, nézze meg a fenti linkeket további információkért.

tapasztalatom szerint, míg a Sass és a Coffeescript sok szintaktikai cukrot (szép kódjellemzőket) szolgáltat, az a tény, hogy az előfeldolgozási szakaszban érvénytelen kódokat dobnak ki, elegendő a használatuk igazolásához. A Coffeescript automatikusan becsomagolja a kódot fájlonként, és hozzáadja a var kulcsszót a helyi változókhoz, így megakadályozza a sok hatókör-fejfájást, amely könnyebben megtörténhet a Vanilla Javascript-ben.

például a következő Coffeescript kód:

12345

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

a következő Javascript-re konvertálódik:

1234567891011

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

amikor az előfeldolgozó feldolgozza a fájlt, automatikusan becsomagolja a kódot egy névtelen függvénybe ((function() {}).call(this)), és hozzáadja a var kulcsszót a stateelső használatához. Vegye figyelembe, hogy ha a globális hatókört szeretné használni, akkor ezt a window.előtaggal kell megadnia.

sokkal több van a Coffeescript-ben, de az automatikus hatókör számomra rendkívül hasznos volt a nehezen megtalálható hibák megelőzésében.

Rails Asset Helpers

egy másik nagyszerű funkció, amelyet csak a Sass használatával érhet el a Rails projektben, az asset path helpers. Ha más eszközökre hivatkozik a Sass-ban, a következő szintaxist használhatja a megfelelő útvonalak megszerzéséhez:

123

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

a helpers image-path, asset-url és asset-path is használható. A -url segítők az utat url() – val tekerik be.

Erb eszközök

az eszköz csővezeték lehetővé teszi, hogy értékelje erb kódot a CSS és Javascript eszközök utótag a fájlnév.application.js.erb vagy application.scss.erb). Bár ez hasznos lehet az eszközútvonalak hozzáadásához a Javascript-hez, összességében nem javaslom ennek a funkciónak a használatát. Egy újabb előfeldolgozási lépést ad a fájlhoz, ezáltal növelve az előfordításhoz szükséges időt. Ez rossz szokásokhoz is vezethet. Lehet, hogy a kísértés, hogy adjunk kódot, hogy nincs értelme a fordítási időben, mint a fordítás Húrok. Ezeket a karakterláncokat csak fordításkor fordították le, így tagadva a fordítás teljes célját. Az ERB Javascript fájlban való használatának egyetlen oka a asset_path helper használata, amint azt az útmutató tárgyalja.

Asset Pipeline Gotchas

az alábbiakban bemutatunk néhány gotchát és apróságot, amelyek hasznosak lehetnek a Rails alkalmazás eszközeinek fejlesztésében.

• Hogyan adhatok hozzá globális adatokat a Javascript használatához?
  • a gon gem lehet használni, hogy helyezze globálisan hatókörű adatokat az oldalra a Javascript fogyasztani. Ez nagyszerű olyan dolgokhoz, mint például az aktuális felhasználói azonosító vagy a Webhely beállításainak megadása.
• hol kell növelni az előfordított tömböt?
  • a Rails 4-ben a tömböt config/initializers/assets.rb – ben, a Rails 3-ban pedig config/application.rb – ben kell kibővíteni. Eszközök használata.rb vagy alkalmazás.az rb úgy állítja be az előfordított tömböt minden környezethez, hogy ha hozzáad egy környezetet (esetleg staging), akkor nem kell az előfordított tömböt kifejezetten az adott új környezethez növelni.
    • eszközök.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • alkalmazás.rb: config.assets.precompile += %w( widget.js widget.css )
• mikor kell külön-külön előfordítanom az eszközöket az előfordított tömb bővítésével?
  • ezt ritkán kell megtenni. Legtöbbször csak akkor szeretné ezt megtenni, ha az eszköz egyedül szerepel egy speciális oldalon, ahol nem szeretné a többi eszközt, például egy iframe-beágyazott widgetet. Használja az alkalmazást.js és alkalmazás.css nyilvánul meg, hogy húzza az eszközök.
• engedélyeznem kell a sínek statikus fájlok kiszolgálását?
  • Igen. Ez követi a Tizenkét tényezős alkalmazás irányelveit, és megakadályozza a hibákat, ha elfelejtette felvenni a fájlt az előfordított tömbbe, vagy ha elfelejtette az előfordítást.
  • állítsa be a config.serve_static_assets = true értéket a 3.sínben és a config.serve_static_files = true értéket a 4. sínben.
• hogyan biztosíthatom, hogy a Javascript / CSS jól meg van írva?
  • a jó minőségű Javascript és CSS (vagy Coffeescript és Sass) írása sok időt és tapasztalatot igényelhet, de egy dolog, ami sokat segített nekem, az a linter használata). Egyes IDE-k, például a Sublime Text, olyan bővítményekkel rendelkeznek, amelyek integrálják a lintereket. Én személy szerint a SublimeLinter csomagot használom. Ha egyszerű Javascript-et és CSS-t fogsz írni, akkor feltétlenül használnod kell egy lintert.
• Hogyan változtathatom meg a könyvtárat, ahol az előre lefordított eszközök kerülnek?
  • a config.asset.prefixbeállítást megváltoztathatja egy másik könyvtárra, például /static.
  • módosítsa az eszköz előtagot a development.rb – ben, ha nyomon szeretné követni az előre lefordított eszközöket a GIT-ben termelési használatra.
  • módosítsa az eszköz előtagot globálisan, ha a /assets elérési út névteret szeretné használni a vezérlők számára.
• hogyan szolgálhatok statikus eszközöket az Nginx segítségével?
  • az alapvető nginx irányelvnek így kell kinéznie (további információkért lásd a Rails útmutató eszközök Előfordítása című részét):

1234567

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

• ami nyilvánvaló.YML vagy manifest-.json?
  • a manifest.yml (sínek 3) vagy nyilvánvaló-.a JSON (Rails 4) fájlok automatikusan létrejönnek, amikor a kellékeket rake assets:precompile – val előfordítja. Információkat tartalmaznak arról, hogy mely fájlokat használja az alkalmazás.
• milyen típusú fájlokat nem szabad belefoglalni az eszközfolyamatba?
  • általában nagy fájlokat (videókat, nagyszámú PDF-letöltést stb.) egy külön adattárban vagy egy felhő fájlkezelőben, például az AWS S3-ban. A fájlokra ezután hivatkozni lehet az alkalmazásból, de nem kell lerázni a git adattárat.
• Hogyan érhetem el, hogy a Rails 3 eszközök gyorsabban fordítsanak?
  • használja az turbo-sprockets-rails3 drágakövet.
• használhatok CDN-t (content delivery network) az eszközeimhez?
  • Igen! A digest, vagy ujjlenyomat, utótagja minden eszköz teszi őket dolgozni nagy CDNs. Állítsa be a CDN-t a Rails alkalmazás eszközeinek kiszolgálására, majd állítsa be az config.action_controller.asset_host konfigurációt a CDN-nek megfelelő tartományra (például config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). A környezeti változók használatát javaslom ennek beállításához: config.action_controller.asset_host = ENV.

csomagolása

az eszközvezeték megfelelő használata javíthatja az alkalmazás általános minőségét a teljesítmény, az ellenálló képesség és a kód tisztasága szempontjából. Az eszközvezeték funkcióinak használatával automatikusan leküzdheti a statikus eszközök kódolásával és kézbesítésével kapcsolatos legnagyobb problémákat.