alles wat u moet weten over de Rails Asset Pipeline

Wat is de asset pipeline?

als u een Rails-toepassing bouwt, hebt u waarschijnlijk gehoord van de asset-pijplijn. De asset pipeline kan worden gezien als de tools en mechanismen waarmee Javascript-bestanden, stylesheets en afbeeldingen worden verwerkt en voorbereid voor gebruik door de browser. Deze processen kunnen assets kleineren en comprimeren, evenals pre-process assets die zijn geschreven in andere talen zoals Coffeescript of Sass.

de asset pipeline werd opgezet om een verscheidenheid aan problemen met betrekking tot statische activa op te lossen. Een zo ‘ n probleem is dat elk item apart gespecificeerd in de HTML-opmaak afzonderlijk moet worden opgehaald, wat resulteert in een hoger aantal HTTP-verzoeken en, uiteindelijk, een langere laadtijd. Raw Javascript-en CSS-bestanden kunnen ook veel bandbreedte verspillen met opmerkingen, extra witruimte en lange variabele namen. Een ander probleem dat naar voren komt is caching. Wanneer u bijvoorbeeld een Javascript-bestand van uw server opstuurt, zal de browser dat bestand automatisch gedurende een bepaalde periode cachen. Dat verbetert de laadtijd van de pagina, maar wat als dat actief verandert op een later moment in de tijd? De browser zal niet weten over het, dus het zal doorgaan met het gebruik van de cache actief totdat de cache leven is verlopen. Tot slot hebben talen als Coffeescript, Sass, Less en Erb het makkelijker gemaakt om Javascript en CSS te organiseren en te schrijven, maar de browser kan ze niet direct interpreteren, dus een pre-processor is nodig om deze bestanden om te zetten in hun geschikte tegenhangers voordat ze naar de browser worden verzonden.

de asset-pijplijn kan, in zijn voordeel, alle bovenstaande problemen oplossen wanneer deze correct wordt gebruikt. Het kan meerdere assets compileren in één, minify en comprimeren van assets, zorgen voor het verteren van assets om caching problemen te voorkomen, en kan pre-process alternatieve talen en zet ze in Javascript en CSS.

deze post behandelt een verscheidenheid aan onderwerpen die verband houden met de asset pipeline:

• de basisprincipes van het gebruik van de asset pijplijn
• best practices voor het structureren van de plaats van uw activa
• hoe te gebruiken het precompile matrix opgeven welke bestanden worden verwerkt door het actief pijplijn
• hoe Sass en Coffeescript kan worden benut
• hoe te gebruiken Rails actief helper methoden, en
• sommige valkuilen

Gebruik

Er zijn twee basis manieren zijn dat het actief een pijpleiding wordt gebruikt:

1. Bij het draaien van een server in de ontwikkeling van de modus automatisch pre-processen en bereidt uw activa on-the-fly.
2. in de productiemodus zult u het waarschijnlijk gebruiken om uw assets vooraf te verwerken, te versioneren, te comprimeren en te compileren. U kunt dit doen door het volgende commando uit te voeren:

1

bundle exec rake assets:precompile

dit zal (standaard) een assets map aanmaken in uw public/ map. Het zal dan alle gecomprimeerde en gecompileerde bestanden toe te voegen aan die map, in de juiste formaten en met de nieuwe verteerde versies. Je kunt dan Nginx of Apache Instellen om die bestanden direct te server, zodat Rails ze niet hoeft te leveren (en de on-the-fly preprocessing, enz.) zelf.

onthoud dat de standaardinstellingen kunnen worden gewijzigd, dus als de dingen niet werken zoals verwacht, controleer dan uw applicatieconfiguratiebestand in config/application.rb. In Rails 4 wordt de verwerking van activa doorgaans geconfigureerd in config/initializers/assets.rb.

bestandsstructuur

het is belangrijk om uw activa op een voor u begrijpelijke manier te organiseren en de bestaande functionaliteit van de assetpijplijn te vergemakkelijken. Het eerste wat je moet weten is dat al je aangepaste Javascript, stylesheets en images in de app/assets/ map moeten staan. Standaard is er een map voor elk javascripts, stylesheets en images. U kunt ook fonts, audios en videos toevoegen aan de app/assets/ map voor deze soorten activa. Alle code van derden die u gebruikt (bijvoorbeeld jQuery, backbone.js, enz.) moet in de map vendor/assets/ worden geplaatst:

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.

aangezien uw webserver automatisch statische bestanden uit de public/ Map server, waarom zouden niet alle Javascript -, image-en stylesheet-assets daar geplaatst moeten worden? Om te beginnen zal niets in de public map automatisch worden voorverwerkt, gecompileerd of gecomprimeerd, dus door activa daar te plaatsen, omzeilt u volledig de assetpijplijn en verliest u al zijn voordelen. Wanneer u activa daar plaatst, verliest u ook de mogelijkheid om ze gemakkelijk te verwijzen binnen uw Rails-code. Je zou bijvoorbeeld een weergave kunnen hebben met de volgende code:

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

In het tweede scenario (public/images/logo.png) zal de site alleen werken als het wordt geleverd vanuit de basismap. Het kan ook niet profiteren van de asset pipeline ‘ s versiebeheer van het bestand.

Precompilatie

u vraagt zich nu misschien af of alles wat u in de app/assets/javascripts/ map plaatst automatisch wordt voorgecompileerd voor uw app. Gelukkig biedt de asset pipeline een manier om aan te geven welke bestanden worden gecompileerd, en in welke volgorde. Standaard toepassing.css en toepassing.js (of hun sass/coffeescript equivalenten), samen met alle niet-Javascript, niet-CSS activa zijn opgenomen. Om een ander CSS-of Javascript-bestand dan applicatie op te nemen.css en toepassing.js, je moet het op twee manieren nodig hebben.:

1. voeg het toe aan de precompile array in config/initializers/assets.rb (Rails 4) of uw applicatieconfiguratiebestand (bijvoorbeeld config/application.rb), of
2. voeg het bestand toe aan het manifest van uw asset of aan het manifest van een subbestand.

de eerste optie ziet er als volgt uit:

12

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

deze optie is het beste voor bestanden die het zinvol is om alleen op bepaalde pagina ‘ s, en mag niet worden opgenomen op anderen. Als u bijvoorbeeld een gedeelte van uw site hebt dat gebruikt zal worden als een iframe embedded widget, wilt u misschien alleen widget.js en widget.css, of iets dergelijks, op die pagina gebruiken. Deze bestanden zouden moeten worden toegevoegd aan de precompile array zoals hierboven getoond.

de tweede optie is wat meestal gebruikt moet worden, en staat toe dat uw Javascript-en CSS-bestanden worden gecompileerd in één toepassing.js en één applicatie.css-bestand. Het manifest wordt boven aan het toepasselijke actief geschreven.

in coffeescript ziet het er zo uit:

12345

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

het bovenstaande manifest zal jQuery bevatten, de Rails jQuery onopvallende scripting adapter (jquery_ujs), en alle bestanden in de huidige boom (dwz app/assets/javascript/*). Merk op dat require_tree activa niet recursief compileert via mappen. Als u een map met bestanden die u wilt opnemen, moet u die toevoegen aan het manifest goed:

1

#= require_tree ./components

Een meer manifest richtlijn is require_self, die wordt gebruikt om het huidige bestand Javascript op dat punt in de keten. Het bovenstaande, met een require_self kan als volgt worden geschreven in een .js bestand:

1234567

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

De Sass/CSS manifesteert gebruik maken van de basis dezelfde indeling, maar met de juiste reactie stijl:

123456

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

Merk op dat bij het gebruik van Sass, moet u gebruik maken van de @import regel om te profiteren van variabelen en mixins, als elk bestand samengesteld door het manifest heeft zijn eigen toepassingsgebied.

wees voorzichtig met het gebruik van de require_tree richtlijn. Assets in de boom zullen worden opgenomen in alfabetische volgorde, wat betekent dat als een bestand dat begint met” a “afhankelijk is van een bestand dat begint met” z”, je zou kunnen lopen in problemen waar de benodigde stukken zijn niet beschikbaar wanneer het Javascript wordt geëvalueerd door de browser. Dit probleem kan worden vermeden door de juiste jQuery(document).ready(), of window.onload bewakers te gebruiken, door handmatig een volgorde op te geven, of door de bestanden voor te schrijven met getallen als 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

onthoud dat elk voorgecompileerd Javascript-of CSS-bestand bovenaan een manifest kan bevatten, zodat u de bestanden van submappen kunt gebruiken om uw manifest op het hoogste niveau te vereenvoudigen.

Sass en Coffescript, en Rails Asset Helpers

Ik heb Sass en Coffeescript een beetje genoemd in de bovenstaande secties, maar ik ben nog niet ingegaan op wat ze zijn. Als u al bekend bent met hen, voel je vrij om te overslaan naar de “Rails Asset Helpers” sectie.

Sass en Coffeescript

Sass en Coffeescript zijn talen die preprocessors gebruiken om hun syntaxis te transformeren in respectievelijk CSS en Javascript. Er zijn verschillende andere voorgewerkte talen zoals Typescript en Less, maar Sass en Coffeescript zijn standaard opgenomen met Rails, en zijn waarschijnlijk de meest populaire. Ik zal hier niet uitgebreid ingaan op deze talen, dus kijk op de links hierboven voor meer informatie.

uit mijn ervaring, terwijl Sass en Coffeescript veel syntactische suiker (pretty code features) bieden, is het feit dat er uitzonderingen worden gemaakt voor ongeldige code in de preprocessing fase voldoende om het gebruik ervan te rechtvaardigen. Coffeescript wikkelt automatisch uw code per bestand en voegt het var sleutelwoord toe aan uw lokale variabelen, waardoor veel hoofdpijnen in het bereik worden voorkomen die gemakkelijker kunnen gebeuren in Vanilla Javascript.

bijvoorbeeld de volgende Coffeescript-code:

12345

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

is geconverteerd naar de volgende Javascript -:

1234567891011

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

Wanneer de preprocessor verwerkt het bestand, automatisch de code in een anonieme functie ((function() {}).call(this)) en voegt de var zoekwoord in om het eerste gebruik van state. Merk op dat als u het globale bereik wilt gebruiken, u dat moet specificeren door voorvoegsel window..

Coffeescript heeft veel meer te bieden, maar de automatische scoping is voor mij persoonlijk zeer nuttig geweest bij het voorkomen van moeilijk te vinden bugs.

Rails Asset Helpers

een andere geweldige functie die u alleen kunt krijgen door Sass in uw Rails project te gebruiken, zijn de asset path helpers. Wanneer u verwijst naar andere assets in uw Sass, kunt u de volgende syntaxis gebruiken om de juiste paden te krijgen:

123

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

de helpers image-path, asset-url en asset-path kunnen ook worden gebruikt. De -url helpers wikkelen het pad met url().

Erb in activa

de asset-pijplijn stelt u in staat om erb-code in uw CSS-en Javascript-activa te evalueren door de bestandsnaam achter te voegen .erb (bv. application.js.erb of application.scss.erb). Hoewel dit nuttig kan zijn voor het toevoegen van asset paden aan uw Javascript, over het algemeen raad ik niet aan om deze functie te gebruiken. Het voegt nog een preprocessing stap aan het bestand, waardoor het verhogen van de tijd die nodig is om precompile. Het kan ook leiden tot slechte gewoonten. Je zou in de verleiding kunnen komen om code toe te voegen die geen zin heeft tijdens het compileren, zoals het vertalen van strings. Deze strings zouden alleen tijdens het compileren worden vertaald, waardoor het hele doel van het vertalen ervan wordt ontkend. De enige reden om Erb te gebruiken in een Javascript-bestand zou moeten zijn om de asset_path helper te gebruiken zoals besproken in de gids.

Asset Pipeline Gotcha ‘s

de volgende Gotcha’ s en weetjes kunnen nuttig zijn bij het ontwikkelen van de assets van uw Rails applicatie.

• hoe voeg ik globale gegevens toe die mijn Javascript kan gebruiken?
  • de Gon gem kan worden gebruikt om globaal-scope gegevens in te voegen aan de pagina voor uw Javascript te consumeren. Dit is geweldig voor dingen als het verstrekken van de huidige gebruiker ID Of site-instellingen.
• waar moet ik de precompile array uitbreiden?
  • in Rails 4 moet u de array vergroten in config/initializers/assets.rb, en in Rails 3 moet u dit doen in config/application.rb. Met behulp van activa.rb of toepassing.rb stelt de precompile array in voor alle omgevingen, zodat als u een omgeving toevoegt (misschien staging), u de precompile array niet specifiek hoeft te vergroten voor die nieuwe omgeving.
    • activa.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • aanvraag.rb: config.assets.precompile += %w( widget.js widget.css )
• Wanneer moet ik activa afzonderlijk voorcompileren door de precompile array te vergroten?
  • dit dient zelden te gebeuren. De meeste van de tijd, de enige reden dat je zou willen om dit te doen is als het actief is opgenomen alleen op een speciale pagina waar u niet wilt dat de rest van de activa, zoals een iframe-embedded widget. Gebruik je applicatie.js en toepassing.css manifesteert zich om je activa binnen te halen.
• moet ik Rails toestaan om statische bestanden te dienen?
  • Ja. Dit volgt De Twaalf-Factor app richtlijnen en voorkomt fouten als je vergeten bent om een bestand op te nemen in de precompile array of als je vergeten bent om precompile.
  • Set config.serve_static_assets = true in Rails 3, en config.serve_static_files = true in Rails 4.
• Hoe kan Ik ervoor zorgen dat mijn Javascript / CSS goed geschreven is?
  • het schrijven van hoogwaardige Javascript en CSS (of Coffeescript en Sass) kan veel tijd en ervaring kosten, maar een ding dat me enorm heeft geholpen is het gebruik van een linter). Sommige IDEs, zoals Sublime Text, hebben plugins die linters integreren. Ik gebruik persoonlijk het sublimelinter pakket. Als je gewone Javascript en CSS gaat schrijven, moet je zeker een linter gebruiken.
• Hoe verander ik de directory waar mijn voorgecompileerde assets worden geplaatst?
  • u kunt de instelling config.asset.prefix wijzigen in een andere map, zoals /static.
  • Wijzig het asset prefix in development.rb als je voorgecompileerde assets in git wilt volgen voor productiegebruik.
  • Wijzig het asset-voorvoegsel globaal als u de naamruimte /assets pad wilt gebruiken voor uw controllers.
• Hoe kan ik statische activa bedienen met Nginx?
  • de basis-Nginx-richtlijn zou er zo uit moeten zien (zie de sectie Voorcompilering van activa van de Rails-Gids Voor meer informatie):

1234567

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

• wat duidelijk is.yml of manifest-.json?
  • het manifest.yml (Rails 3) of manifest-.json (Rails 4) bestanden worden automatisch aangemaakt wanneer u uw assets precompileert met rake assets:precompile. Ze bevatten informatie over welke bestanden moeten worden gebruikt door uw app.
• welke soorten bestanden moeten niet worden opgenomen in de asset pipeline?
  • u wilt meestal grote bestanden (video ‘ s, grote aantallen PDF-downloads, enz.) in een aparte repository of in een cloud file manager, zoals AWS S3. De bestanden kunnen dan vanuit je app worden gerefereerd, maar hoeven je git repository niet te vullen.
• Hoe kan ik mijn Rails 3 assets sneller laten compileren?
  • gebruik de turbo-sprockets-rails3 gem.
• kan ik een CDN (content delivery network) gebruiken voor mijn assets?
  • Ja! De digest, of vingerafdruk, achtervoegsel op elk actief maakt ze werken geweldig met CDN ‘ s. Stel uw CDN in om activa van uw Rails-app te bedienen en stel vervolgens de configuratie config.action_controller.asset_host in op het juiste domein voor uw CDN (bijvoorbeeld config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Ik raad aan omgevingsvariabelen te gebruiken om dit in te stellen: config.action_controller.asset_host = ENV.

het inpakken

het correct gebruiken van de asset pipeline kan de algehele kwaliteit van uw applicatie verbeteren in termen van prestaties, veerkracht en netheid van de code. Door de functies van de asset pipeline te gebruiken, kunt u automatisch enkele van de grootste problemen met betrekking tot coderen en het leveren van statische activa te overwinnen.