vše, co byste měli vědět o Rails Asset Pipeline

co je to asset pipeline?

pokud stavíte aplikaci Rails, pravděpodobně jste slyšeli o potrubí aktiv. Potrubí aktiv lze považovat za nástroje a mechanismy, kterými jsou soubory JavaScriptu, styly a obrázky zpracovávány a připravovány pro použití prohlížečem. Tyto procesy mohou minifikovat a komprimovat aktiva, stejně jako aktiva před zpracováním, která jsou napsána v jiných jazycích, jako je Coffeescript nebo Sass.

potrubí aktiv bylo vytvořeno pro řešení různých problémů souvisejících se statickými aktivy. Jedním z takových problémů je, že každé aktivum specifikované Samostatně v označení HTML musí být načteno samostatně, což má za následek vyšší počet požadavků HTTP a nakonec delší dobu načítání. Raw Javascript a CSS soubory mohou také ztrácet spoustu šířky pásma s komentáři, extra prázdné místo, a dlouhé názvy proměnných. Dalším problémem, který přichází, je ukládání do mezipaměti. Když například servírujete soubor Javascript ze serveru, prohlížeč tento soubor automaticky uloží do mezipaměti po určitou dobu. To zlepšuje čas načítání stránky, ale co když se toto aktivum změní později? Prohlížeč o tom nebude vědět, takže bude i nadále používat aktivum uložené v mezipaměti, dokud nevyprší jeho životnost mezipaměti. Konečně, jazyky jako Coffeescript, Sass, Less, a Erb dělal to jednodušší organizovat a psát Javascript a CSS, ale prohlížeč neumí interpretovat přímo, takže pre-procesor je potřeba převést tyto soubory do jejich příslušné protějšky před jejich odesláním do prohlížeče.

potrubí aktiv může ve své benevolenci vyřešit všechny výše uvedené problémy při správném použití. To může sestavit více aktiv do jednoho, minify a obklad aktiv, poskytnout trávení aktiv, aby se zabránilo problémy ukládání do mezipaměti, a můžete pre-proces, alternativní jazyky a proměnit je v Javascriptu a CSS.

tento příspěvek pokrývá celou řadu témat souvisejících s ropovodem aktiv:

• základy toho, jak používat asset pipeline
• osvědčených postupů pro strukturování, kam dát vaše aktiva
• jak používat precompile pole určit, jaké soubory jsou zpracovány asset pipeline
• jak Sass a Coffeescript může být hybnou silou,
• jak používat Kolejnice aktiv pomocné metody, a
• některé gotchas

Základní Použití

Existují dva základní způsoby, že aktivum potrubí se používá:

1. Při spuštění serveru v režimu rozvoje, automaticky pre-procesy a připravuje svůj majetek on-the-fly.
2. v produkčním režimu jej pravděpodobně použijete k předběžnému zpracování, verzování a kompresi a kompilaci vašich aktiv. Můžete tak učinit spuštěním následujícího příkazu:

1

bundle exec rake assets:precompile

To bude vytvořit (výchozí nastavení) assets adresář public/ složka. Poté přidá všechny komprimované a kompilované soubory do tohoto adresáře, v příslušných formátech a s novými strávenými verzemi. Pak můžete nastavit Nginx nebo Apache na server tyto soubory přímo tak, že Rails nemusí dodávat (a spustit on-the-fly předzpracování, atd.) sám.

nezapomeňte, že výchozí hodnoty lze změnit, takže pokud věci nefungují podle očekávání, zkontrolujte konfigurační soubor aplikace v config/application.rb. V kolejnicích 4 je manipulace s aktivy obvykle konfigurována v config/initializers/assets.rb.

Struktura Souboru

je důležité, aby organizovat svůj majetek způsobem, který je pochopitelný, a usnadňuje stávající funkčnost aktiv potrubí. První věc, kterou byste měli vědět, je, že všechny vaše vlastní Javascript, styly a obrázky by měly jít do adresáře app/assets/. Ve výchozím nastavení existuje složka pro javascripts, stylesheets a images. Můžete také přidat fonts, audios a videos do adresáře app/assets/ pro tyto typy aktiv. Všechny kódy třetích stran, které používáte (např.js, atd.) by měl být umístěn v adresáři vendor/assets/ :

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.

Protože váš webový server bude automaticky server statické soubory z public/ directory, proč by ne všechny Javascriptu, image a styl aktiva být umístěny tam? Pro jednoho, nic v public složka bude mít předem zpracovány, sestaveny, nebo komprimován automaticky, tak tím, že majetek tam, ty jsou zcela obcházet asset pipeline a ztrácí všechny jeho výhody. Když tam vložíte aktiva, ztratíte také schopnost snadno je odkazovat v kódu Rails. Můžeš mít názor, například, který má následující kód:

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

Ve druhém scénáři (public/images/logo.png), stránky budou fungovat pouze tehdy, pokud je doručen od základní adresář. Nemůže také využít verzování souboru pomocí asset pipeline.

Precompilation

možná se nyní ptáte, zda vše, co vložíte do složky app/assets/javascripts/, bude automaticky předkompilováno pro vaši aplikaci. Naštěstí potrubí aktiv poskytuje způsob, jak určit, které soubory jsou kompilovány a v jakém pořadí. Ve výchozím nastavení aplikace.css a aplikace.JS (nebo jejich ekvivalenty sass/coffeescript), spolu se všemi non-Javascript, non-CSS aktiva jsou zahrnuty. Chcete-li zahrnout soubor CSS nebo Javascript jiný než aplikace.css a aplikace.js, budete muset vyžadovat to v jednom ze dvou způsobů:

1. Přidat do precompile pole v config/initializers/assets.rb Lišty (4), nebo své žádosti config (např. config/application.rb) nebo
2. Patří souboru ve vašem aktiva manifest nebo jeden z jeho sub-soubor manifest.

první možnost vypadá takto:

12

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

Tato možnost je nejlepší pro soubory, které to dává smysl, aby zahrnovalo pouze na určité stránky, a neměly by být zahrnuty na ostatní. Pokud máte například část vašeho webu, která bude použita jako vložený widget iframe, můžete na této stránce použít pouze widget.js a widget.css nebo podobné. Tyto soubory by musely být přidány do pole precompile, jak je uvedeno výše.

druhá možnost je to, co by mělo být používáno většinu času, a umožňuje kompilaci souborů Javascript a CSS do jedné aplikace.js a jedna aplikace.soubor css. Manifest je napsán v horní části příslušného aktiva.

V coffeescript, vypadá jako tento:

12345

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

výše uvedený manifest bude zahrnovat jQuery, Rails jQuery nenápadný skriptování adaptér (jquery_ujs), a všechny soubory v aktuálním stromu (např. app/assets/javascript/*). Všimněte si, že require_tree nekompiluje aktiva rekurzivně prostřednictvím adresářů. Pokud máte složku souborů, které chcete zahrnout, budete muset dodat, že do projevovat stejně:

1

#= require_tree ./components

Jeden manifest směrnice je require_self, který se používá k obsahovat aktuální soubor Javascript v tomto bodě v řetězci. Výše uvedené, s require_self lze zapsat do souboru .js následovně:

1234567

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

Sass/CSS projevuje použít stejný základní formát, ale s odpovídající komentář styl:

123456

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

Všimněte si, že při použití Sass, budete muset použít své @import pravidlo využít proměnné a mixins, protože každý soubor, který sestavil manifest má svůj vlastní prostor.

buďte opatrní při používání směrnice require_tree. Majetek ve stromu budou zahrnuty v abecedním pořadí, což znamená, že pokud soubor, který začíná s „a“ závisí na souboru, který začíná „z“, můžete narazit na problémy, kde potřebné kusy nejsou k dispozici, když Javascript je hodnocena prohlížeče. Tomuto problému se lze vyhnout použitím příslušných jQuery(document).ready(), nebo window.onload stráže, zadáním pořadí ručně, nebo být prefixování souborů s čísly jako 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

Pamatujte si, že žádné předkompilovaný Javascript nebo CSS soubor může obsahovat manifest na vrcholu, takže můžete použít podsložky se soubory zjednodušit své nejvyšší úrovni projevovat.

Sass a Coffescript, a Kolejnice Aktiv Pomocníci

jsem se zmínil, Sass a Coffeescript trochu ve výše uvedených oddílech, ale ještě jsem šel do toho, co oni jsou. Pokud jste již obeznámeni s nimi, neváhejte přeskočit na dolů do sekce“ Rails Asset Helpers“.

Sass a Coffeescript

Sass a Coffeescript jsou jazyky, které používají troffu transformovat jejich syntaxe do CSS a Javascript, respektive. Existuje několik dalších předzpracovaných jazyků, jako je Typescript a Less, ale Sass a Coffeescript jsou standardně zahrnuty s Rails a jsou pravděpodobně nejoblíbenější. Nebudu jít do rozsáhlých detailů zde na těchto jazycích, tak prosím podívejte se na odkazy výše pro více informací.

Z mé zkušenosti, zatímco Sass a Coffeescript poskytnout spoustu syntaktického cukru (celkem kód funkce), skutečnost, že výjimky jsou vyvolána neplatný kód ve fázi předzpracování je dost ospravedlnit jejich použití. Coffeescript automaticky zabalí váš kód do souboru a přidá Klíčové slovo var do místních proměnných, čímž zabrání mnoha bolestem hlavy, které se mohou ve vanilkovém JavaScriptu stát snadněji.

například následující kód Coffeescript:

12345

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

je převeden na následující Javascript:

1234567891011

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

Když preprocesor zpracovává souboru, je to automaticky zábaly kód v anonymní funkce ((function() {}).call(this)) a přidá var klíčové slovo na první použití state. Všimněte si, že pokud chcete použít globální rozsah, musíte to zadat prefixem window..

existuje mnohem více Coffeescript, ale automatický rozsah byl velmi užitečné pro mě osobně v prevenci těžko k nalezení chyby.

Rails Asset Helpers

další skvělou funkcí, kterou můžete získat pouze pomocí Sass v projektu Rails, jsou asset path helpers. Při odkazování jiných aktiv ve vašem Sass, můžete použít následující syntaxi získat vhodné cesty:

123

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

pomocníci image-path, asset-url, a asset-path mohou být také použity. Pomocníci -url zabalí cestu url().

Erb v aktivech

potrubí aktiv umožňuje vyhodnotit kód erb ve vašich aktivech CSS a Javascript pomocí přípony názvu souboru .application.js.erb nebo application.scss.erb). I když to může být užitečné pro přidání cesty aktiv do vašeho JavaScriptu, v celku nedoporučuji používat tuto funkci. Přidává další krok předzpracování do souboru, čímž se zvyšuje čas potřebný k předkompilaci. Může také vést ke špatným návykům. Můžete být v pokušení přidat kód, který nedává smysl v době kompilace, jako je překlad řetězců. Tyto řetězce by byly přeloženy pouze v době kompilace, čímž by byl vyvrácen celý účel jejich překladu. Jediným důvodem pro použití Erb v souboru Javascript by mělo být použití pomocníka asset_path, jak je popsáno v příručce.

Asset Pipeline Gotchas

níže jsou uvedeny některé gotchas a tidbits, které mohou být užitečné při vývoji aktiv aplikace Rails.

• Jak mohu přidat globální data pro můj Javascript používat?
  • Gon gem lze použít k vložení globálně zaměřených dat na stránku, aby váš Javascript mohl spotřebovat. To je skvělé pro věci, jako je poskytování ID aktuálního uživatele nebo nastavení webu.
• kde bych měl rozšířit předkompilní pole?
  • v Rails 4 byste měli rozšířit pole v config/initializers/assets.rb a v Rails 3 byste to měli udělat v config/application.rb. Použití aktiv.rb nebo aplikace.rb nastaví precompile pole pro všechny prostředí, tak, že přidáte prostředí (možná staging), nebudete muset rozšířit precompile pole speciálně pro to nové prostředí.
    • aktiva.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • aplikace.rb: config.assets.precompile += %w( widget.js widget.css )
• Když mám precompile aktiva samostatně rozšiřovat precompile pole?
  • to by se mělo provádět jen zřídka. Většinu času, jediný důvod, proč byste to chtěli udělat, je, pokud je aktivum zahrnuto Samostatně na speciální stránce, kde nechcete zbytek aktiv, jako je widget vložený do iframe. Použijte svou aplikaci.js a aplikace.css se projevuje, aby vytáhl vaše aktiva.
• mám povolit, aby kolejnice sloužily statickým souborům?
  • Ano. Následuje Dvanáct-Faktor Aplikace pokyny a zabraňuje chybám, pokud jste zapomněli zahrnout soubor v precompile pole, nebo, pokud jste zapomněli precompile.
  • nastavit config.serve_static_assets = true v kolejnicích 3 a config.serve_static_files = true v kolejnicích 4.
• Jak mohu zajistit, aby byl můj Javascript / CSS dobře napsán?
  • Psát kvalitní Javascript a CSS (nebo Coffeescript a Sass) může trvat hodně času a zkušeností, ale jedna věc, která výrazně pomohla mi je pomocí linter). Některé IDE, například Sublime Text, mají pluginy, které integrují lintery. Já osobně používám balíček SublimeLinter. Pokud se chystáte psát obyčejný Javascript a CSS, určitě byste měli používat linter.
• Jak mohu změnit adresář, kde jsou umístěny mé předkompilované prostředky?
  • můžete změnit nastavení config.asset.prefix do jiného adresáře, například /static.
  • změňte předponu aktiva v development.rb, pokud chcete sledovat předkompilovaná aktiva v gitu pro výrobní použití.
  • změňte předponu aktiva globálně, pokud chcete pro své řadiče použít jmenný prostor cesty /assets.
• Jak mohu sloužit statická aktiva s Nginx?
  • základní nginx směrnice by měla vypadat takto (viz Precompiling Aktiva části Kolejnice průvodce pro více informací):

1234567

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

• to, Co je zjevné.yml nebo manifest-.json?
  • manifest.yml (kolejnice 3) nebo manifest-.json (Rails 4) soubory jsou vytvořeny automaticky, když si předkompilovat svůj majetek s rake assets:precompile. Obsahují informace o tom, které soubory mají být použity vaší aplikací.
• jaké typy souborů by neměly být zahrnuty do potrubí aktiv?
  • obvykle budete chtít uchovávat velké soubory (videa, velké množství Stažení PDF atd.) v samostatném úložišti nebo ve Správci cloudových souborů, jako je AWS S3. Soubory pak lze odkazovat z vaší aplikace, ale nemusíte bažin dolů git úložiště.
• Jak mohu získat mé Rails 3 aktiva kompilovat rychleji?
  • použijte turbo-sprockets-rails3 drahokam.
• Mohu pro svá aktiva použít CDN (content delivery network)?
  • Ano! Digest, nebo otisk prstu, s příponou na každé aktivum dělá je skvěle pracovat s CDN. Nastavte CDN tak, aby sloužil aktivům z aplikace Rails, a poté nastavte konfiguraci config.action_controller.asset_host na příslušnou doménu pro vaše CDN (např. config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). K nastavení tohoto nastavení doporučuji použít proměnné prostředí: config.action_controller.asset_host = ENV.

Balení

Pomocí asset pipeline správně, může zlepšit celkovou kvalitu aplikace z hlediska výkonu, odolnosti a kód čistoty. Pomocí funkcí asset pipeline můžete automaticky překonat některé z největších problémů souvisejících s kódováním a doručováním statických aktiv.