Tutto quello che dovete sapere sulla pipeline Rails Asset

Che cosa è la pipeline asset?

Se stai costruendo un’applicazione Rails, probabilmente hai sentito parlare della pipeline di asset. La pipeline di asset può essere pensata come gli strumenti e i meccanismi con cui i file Javascript, i fogli di stile e le immagini vengono elaborati e preparati per l’uso da parte del browser. Questi processi possono ridurre al minimo e comprimere le risorse, nonché pre-elaborare le risorse scritte in altre lingue come Coffeescript o Sass.

La pipeline delle risorse è stata creata per risolvere una serie di problemi relativi alle risorse statiche. Uno di questi problemi è che ogni risorsa specificata separatamente nel markup HTML deve essere recuperata separatamente, con un numero maggiore di richieste HTTP e, alla fine, un tempo di caricamento più lungo. I file Javascript e CSS grezzi possono anche sprecare molta larghezza di banda con commenti, spazio bianco extra e nomi di variabili lunghi. Un altro problema che si presenta riguarda il caching. Quando si serve un file Javascript dal server, ad esempio, il browser memorizzerà automaticamente il file nella cache per un periodo di tempo. Ciò migliora il tempo di caricamento della pagina, ma cosa succede se tale risorsa cambia in un secondo momento? Il browser non lo saprà, quindi continuerà a utilizzare la risorsa memorizzata nella cache fino alla scadenza della sua vita nella cache. Infine, linguaggi come Coffeescript, Sass, Less ed Erb hanno reso più facile organizzare e scrivere Javascript e CSS, ma il browser non può interpretarli direttamente, quindi è necessario un pre-processore per convertire quei file nelle loro controparti appropriate prima che vengano inviati al browser.

La pipeline di asset, nella sua benevolenza, può risolvere tutti i problemi di cui sopra se utilizzata correttamente. Può compilare più risorse in una, minimizzare e comprimere le risorse, fornire la digestione delle risorse per evitare problemi di caching e può pre-elaborare linguaggi alternativi e trasformarli in Javascript e CSS.

Questo post copre una varietà di argomenti relativi alla pipeline di asset:

• le nozioni fondamentali per l’utilizzo del bene pipeline
• best practice per la strutturazione di dove mettere i vostri beni
• come utilizzare il precompilare array di specificare quali file vengono elaborati da asset pipeline
• come Sass e Coffeescript può essere sfruttato
• come utilizzare Rails asset metodi di supporto, e
• alcuni trucchi

Utilizzo di Base

Ci sono due modi di base che l’asset pipeline viene utilizzata:

1. Quando l’esecuzione di un server in modalità di sviluppo, automaticamente pre-elabora e prepara la tua attività on-the-fly.
2. In modalità di produzione, probabilmente lo userai per pre-elaborare, versionizzare, comprimere e compilare le tue risorse. È possibile farlo eseguendo il seguente comando:

1

bundle exec rake assets:precompile

Questo creerà (per impostazione predefinita) una directory assets nella cartella public/. Sarà quindi aggiungere tutti i file compressi e compilati in quella directory, nei formati appropriati e con le nuove versioni digeriti. È quindi possibile impostare Nginx o Apache sul server di tali file direttamente in modo che Rails non debba consegnarli (ed eseguire la pre-elaborazione al volo,ecc.) stesso.

Ricorda che i valori predefiniti possono essere modificati, quindi se le cose non funzionano come previsto, controlla il file di configurazione dell’applicazione in config/application.rb. In Rails 4, la gestione delle risorse è in genere configurata in config/initializers/assets.rb.

Struttura dei file

È importante organizzare le risorse in modo comprensibile e facilitare le funzionalità esistenti della pipeline delle risorse. La prima cosa che dovresti sapere è che tutti i tuoi Javascript, fogli di stile e immagini personalizzati dovrebbero andare nella directory app/assets/. Per impostazione predefinita, c’è una cartella ciascuna per javascripts, stylesheets e images. È inoltre possibile aggiungere fonts, audios e videos alla directory app/assets/ per questi tipi di risorse. Tutto il codice di terze parti che si sta utilizzando (ad esempio jQuery, backbone.js, ecc.) deve essere inserito nella directory 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.

Poiché il tuo server Web server automaticamente i file statici dalla directory public/, perché non dovrebbero essere posizionate tutte le risorse Javascript, image e stylesheet? Per uno, nulla nella cartella public verrà pre-elaborato, compilato o compresso automaticamente, quindi inserendo le risorse lì, stai completamente ignorando la pipeline delle risorse e perdendo tutti i suoi vantaggi. Quando si mettono risorse lì, si perde anche la possibilità di fare facilmente riferimento all’interno del codice Rails. Si potrebbe avere una vista, ad esempio, il codice seguente:

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

Nel secondo scenario (public/images/logo.png), il sito funziona solo se si è liberato dalla directory di base. Inoltre, non può sfruttare il controllo delle versioni del file della pipeline di asset.

Precompilazione

Ora potresti chiederti se tutto ciò che hai inserito nella cartella app/assets/javascripts/ verrà precompilato automaticamente per la tua app. Fortunatamente, la pipeline di asset fornisce un modo per specificare quali file vengono compilati e in quale ordine. Per impostazione predefinita, applicazione.css e applicazione.js (o i loro equivalenti sass / coffeescript), insieme a tutti gli asset non Javascript, non CSS sono inclusi. Per includere un file CSS o Javascript diverso dall’applicazione.css e applicazione.js, devi richiederlo in due modi:

1. Aggiungilo all’array precompile in config/initializers/assets.rb (Rails 4) o nel file di configurazione dell’applicazione (ad esempio config/application.rb) o
2. Includi il file nel manifest della tua risorsa o in uno dei manifest del suo sotto-file.

La prima opzione assomiglia a questo:

12

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

Questa opzione è la migliore per i file che ha senso includere solo in alcune pagine, e non dovrebbe essere incluso in altri. Ad esempio, se hai una parte del tuo sito che verrà utilizzata come widget incorporato iframe, potresti voler utilizzare solo widget.js e widget.css o simili in quella pagina. Questi file dovrebbero essere aggiunti all’array precompile come mostrato sopra.

La seconda opzione è quella che dovrebbe essere utilizzata la maggior parte del tempo e consente di compilare i file Javascript e CSS in un’unica applicazione.js e un’applicazione.file css. Il manifesto è scritto nella parte superiore della risorsa applicabile.

In coffeescript, sembra che questo:

12345

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

Il suddetto manifesto includere jQuery, le Guide jQuery discreto scripting adattatore (jquery_ujs), e tutti i file correnti albero (cioè app/assets/javascript/*). Si noti che require_tree non compila le risorse in modo ricorsivo attraverso le directory. Se si dispone di una cartella di file che si desidera includere, dovrete aggiungere anche il manifesto e:

1

#= require_tree ./components

Uno più manifesto direttiva require_self, che viene utilizzato per includere il file corrente di Javascript a che punto della catena. Quanto sopra, con un require_self può essere scritto in un file .js come segue:

1234567

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

Il Sass/CSS manifesta utilizzare lo stesso formato di base, ma con l’appropriato stile di commento:

123456

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

si noti che quando si utilizza Sass, devi utilizzare la sua @import regola per approfittare delle variabili e mixins, come ogni file compilato dal manifesto ha il suo ambito di applicazione.

Fai attenzione all’utilizzo della direttiva require_tree. Le risorse nell’albero saranno incluse in ordine alfabetico, il che significa che se un file che inizia con “a” dipende da un file che inizia con “z”, potresti incorrere in problemi in cui i pezzi necessari non sono disponibili quando il Javascript viene valutato dal browser. Questo problema può essere evitato utilizzando le protezioni jQuery(document).ready() o window.onload appropriate, specificando manualmente un ordine o precedendo i file con numeri come 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

Ricorda che qualsiasi file Javascript o CSS precompilato può contenere un manifest in alto, quindi puoi usare i file delle sottocartelle per semplificare il tuo manifest di primo livello.

Sass e Coffescript e Rails Asset Helper

Ho menzionato un po ‘ Sass e Coffeescript nelle sezioni precedenti, ma non sono ancora entrato in quello che sono. Se hai già familiarità con loro, sentiti libero di passare alla sezione “Rails Asset Helper”.

Sass e Coffeescript

Sass e Coffeescript sono linguaggi che utilizzano preprocessori per trasformare la loro sintassi in CSS e Javascript, rispettivamente. Ci sono molti altri linguaggi pre-elaborati come Typescript e Less, ma Sass e Coffeescript sono inclusi di default con Rails e sono probabilmente i più popolari. Non entrerò in dettaglio qui su queste lingue, quindi per favore controlla i link qui sopra per ulteriori informazioni.

Dalla mia esperienza, mentre Sass e Coffeescript forniscono un sacco di zucchero sintattico (belle caratteristiche del codice), il fatto che le eccezioni vengano generate per codice non valido nella fase di pre-elaborazione è sufficiente per garantire il loro utilizzo. Coffeescript avvolge automaticamente il codice per file e aggiunge la parola chiave var alle variabili locali, prevenendo così molti mal di testa nell’ambito che possono accadere più facilmente in Javascript vanilla.

Ad esempio, il seguente codice Coffeescript:

12345

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

è convertito al seguente Javascript:

1234567891011

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

Quando il preprocessore elabora il file, si avvolge automaticamente il codice in una funzione anonima ((function() {}).call(this)) e aggiunge il var parola chiave per il primo utilizzo di state. Si noti che se si desidera utilizzare l’ambito globale, è necessario specificarlo prefissando window..

C’è molto di più in Coffeescript, ma lo scoping automatico è stato estremamente utile per me personalmente nel prevenire bug difficili da trovare.

Rails Asset Helpers

Un’altra grande caratteristica che puoi ottenere solo usando Sass nel tuo progetto Rails è l’asset path helpers. Quando fanno riferimento ad altri asset Sass, è possibile utilizzare la seguente sintassi per ottenere i percorsi appropriati:

123

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

Gli aiutanti image-path, asset-url, e asset-path può anche essere usato. Gli helper -urlavvolgono il percorso con url().

Erb in Asset

La pipeline asset consente di valutare il codice erb nelle risorse CSS e Javascript suffissando il nome del file con .erb (ad esempio application.js.erb o application.scss.erb). Anche se questo può essere utile per aggiungere percorsi di asset al tuo Javascript, nel complesso non consiglio di utilizzare questa funzione. Aggiunge un altro passaggio di pre-elaborazione al file, aumentando così il tempo necessario per precompilare. Può anche portare a cattive abitudini. Potresti essere tentato di aggiungere codice che non ha senso in fase di compilazione, come tradurre le stringhe. Quelle stringhe sarebbero state tradotte solo in fase di compilazione, negando così l’intero scopo di tradurle. L’unico motivo per utilizzare Erb in un file Javascript dovrebbe essere quello di utilizzare l’helper asset_path come discusso nella guida.

Asset Pipeline Trucchi

Di seguito sono riportati alcuni trucchi e curiosità che possono essere utili nello sviluppo delle risorse dell’applicazione Rails.

• Come posso aggiungere dati globali per il mio Javascript da utilizzare?
  • La gemma gon può essere utilizzata per inserire dati con ambito globale nella pagina per il consumo di Javascript. Questo è ottimo per cose come fornire l’ID dell’utente corrente o le impostazioni del sito.
• Dove dovrei aumentare l’array precompile?
  • In Rails 4, dovresti aumentare l’array in config/initializers/assets.rb, e in Rails 3, dovresti farlo in config/application.rb. Utilizzo di risorse.rb o applicazione.rb imposta l’array precompile per tutti gli ambienti in modo che se si aggiunge un ambiente (forse staging), non sarà necessario aumentare l’array precompile specificamente per quel nuovo ambiente.
    • attività.rb: Rails.application.config.assets.precompile += %w( widget.css widget.js )
    • applicazione.rb: config.assets.precompile += %w( widget.js widget.css )
• Quando devo precompilare le risorse separatamente aumentando l’array precompile?
  • Questo dovrebbe essere fatto raramente. La maggior parte delle volte, l’unica ragione per cui vorresti farlo è se la risorsa è inclusa da sola in una pagina speciale in cui non vuoi il resto delle risorse, come un widget incorporato in iframe. Usa la tua applicazione.js e applicazione.css manifesta per tirare nelle vostre risorse.
• Devo consentire a Rails di servire file statici?
  • Sì. Questo segue le linee guida dell’app a dodici fattori e previene gli errori se si è dimenticato di includere un file nell’array di precompilazione o se si è dimenticato di precompilare.
  • Imposta config.serve_static_assets = true in Rails 3 e config.serve_static_files = true in Rails 4.
• Come posso garantire che il mio Javascript / CSS sia ben scritto?
  • Scrivere Javascript e CSS di alta qualità (o Coffeescript e Sass) può richiedere molto tempo ed esperienza, ma una cosa che mi ha aiutato molto è usare un linter). Alcuni IDE, come Sublime Text, hanno plugin che integrano linter. Io personalmente uso il pacchetto SublimeLinter. Se hai intenzione di scrivere Javascript e CSS semplici, dovresti assolutamente usare un linter.
• Come posso cambiare la directory in cui sono collocate le mie risorse precompilate?
  • È possibile modificare l’impostazione config.asset.prefixin un’altra directory, ad esempio /static.
  • Modificare il prefisso delle risorse in development.rb se si desidera tenere traccia delle risorse precompilate in git per l’utilizzo in produzione.
  • Modificare il prefisso asset globalmente se si desidera utilizzare lo spazio dei nomi percorso /assets per i controller.
• Come posso servire le risorse statiche con Nginx?
  • base nginx direttiva dovrebbe essere simile a questo (vedi la Precompilazione Attivo sezione delle Guide guida per ulteriori informazioni):

1234567

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

• Ciò che è evidente.yml o manifesto-.json?
  • Il manifesto.yml (Rotaie 3) o manifesto-.i file json (Rails 4) vengono creati automaticamente quando si precompilano le risorse con rake assets:precompile. Contengono informazioni su quali file devono essere utilizzati dalla tua app.
• Quali tipi di file NON devono essere inclusi nella pipeline delle risorse?
  • Di solito si desidera mantenere file di grandi dimensioni (video, un gran numero di download di PDF, ecc.) in un repository separato o in un file manager cloud, come AWS S3. I file possono quindi essere referenziati dalla tua app, ma non devono impantanarsi nel tuo repository git.
• Come posso ottenere le mie risorse Rails 3 per compilare più velocemente?
  • Usa la gemma turbo-sprockets-rails3.
• Posso utilizzare una CDN (content delivery network) per le mie risorse?
  • Sì! Il digest, o impronta digitale, suffisso su ogni risorsa li rende grande lavoro con CDN. Imposta la tua CDN per servire le risorse dall’app Rails, quindi imposta la configurazione config.action_controller.asset_host sul dominio appropriato per la tua CDN (ad esempio config.action_controller.asset_host = 'mycdn.fictional-cdn.com'). Raccomando di utilizzare le variabili di ambiente per impostare questo: config.action_controller.asset_host = ENV.

Avvolgendolo

L’utilizzo corretto della pipeline di asset può migliorare la qualità complessiva dell’applicazione in termini di prestazioni, resilienza e pulizia del codice. Utilizzando le funzionalità della pipeline delle risorse, è possibile superare automaticamente alcuni dei maggiori problemi relativi alla codifica e alla distribuzione di risorse statiche.