12

Sono un po 'confuso su dove inserire un framework jQuery come Galleria in Rails 3.1's new Asset Pipeline?Dove collocare Galleria (framework jQuery image gallery) in Rails 3.1 Asset Pipeline?

lo so, tecnicamente, dovrebbe andare in /vendors/assets/javascriptsma, è la mia comprensione che, la cartella Galleria con i jQuery & temi vuole essere in radice (/galleria) del sito dal vivo in modo da funzionare correttamente.

Inoltre, mentre ci siamo, dove mettere il seguente script in modo che apparirà solo sulla pagina (s) con una galleria?

<script> 
    $('#gallery').galleria({ 
     width:500, 
     height:500 
    }); 
</script> 

Edit: Sorpreso non c'è risposta!?! Forse la Galleria non è così popolare? Questi sono i file che sto cercando di caricare. Sono inglobati in questo modo anche se ho potuto facilmente spostarli:

vendor/ 
    assets/ 
    javascripts/ 
     galleria-1.2.5.js 
     galleria-1.2.5.min.js 
    galleria/ 
     themes/ 
     classic/ 
      classic-loader.gif 
      classic-map.png 
      galleria.classic.css 
      galleria.classic.js 
      galleria.classic.min.js 

ho pensato Pignonirequire_tree . sarebbe caricare tutto in app/assets, lib/assets e vendor/assets?!?

+0

Buone domande a tutto tondo. Mi dispiace, non conosco le risposte a loro. – Andrew

risposta

2

Ho anche incappato in questo problema. La divisione di una libreria esistente in modo che si adatti alla struttura di javascript/stylesheets corrente è un po 'complicata. Perciò è possibile aggiungere un percorso in più per il file application.rb consente di caricare risorse da, in questo modo:

# Enable the asset pipeline 
    config.assets.enabled = true 
    config.assets.paths << "#{Rails.root}/app/assets/libs" 

Creare una cartella 'librerie' in app/attività, copiare la libreria galleria in questa cartella e aggiungere questo a il file di layout dell'applicazione:

<%= javascript_include_tag 'galleria/galleria-1.2.4.min.js' %> 
    <%= javascript_include_tag 'galleria/themes/classic/galleria.classic.min.js' %> 

si potrebbe anche impacchettare il codice Galleria richiedendo i file js, ma che sta a voi.

22

Ho avuto lo stesso problema e ci è voluto un po 'di tempo per funzionare. Inizialmente, avrebbe funzionato bene per lo sviluppo, ma quando ci siamo trasferiti in produzione, Galleria ha fallito silenziosamente, a causa dei nomi di risorse che ora hanno "impronte digitali". Anche questo sembra essere un problema con i temi dell'interfaccia utente jQuery e molti altri script di questo tipo.

Ovviamente, si può semplicemente tornare al vecchio modo di fare le cose e lanciare tutto in "pubblico", ma vorremmo il vantaggio di unire automaticamente tutti i file css/js e fare le cose in modo rotaie.

Questo è quanto ho capito di lavoro:

vendor/ 
    assets/ 
    images/ 
     classic-loader.gif 
     classic-map.gif 
    javascripts/ 
     galleria-1.2.5.js 
     galleria.classic.js 
    stylesheets 
     galleria.classic.css.scss 

rinominare il file galleria.classic.css-galleria.classic.css.scss. Quindi sostituire i riferimenti di immagine, in questo modo (ho avuto due):

url("classic-loader.gif") diventa image-url("classic-loader.gif")

UPDATE: Sembra che non c'è bisogno di fare questo in Rails 3.1.1. Basta rinominare il file in .css.scss e le guide eseguiranno automaticamente il preprocesso delle chiamate url() per te.

Nel file app/assets/javascripts/application.js, assicurarsi di avere le linee

//= require galleria-1.2.5 
//= require galleria.classic 
//= require_tree . 

In te app/assets/stylesheets/application.css file, assicurarsi di avere le linee

*= require galleria.classic 
*= require_tree . 

Infine, Galleria sembra avere qualche non di fantasia - caricamento standard del css integrato. Questo è ciò che impedisce a Galleria di caricare sul nostro sito di produzione. Dato che abbiamo già incluso il foglio di stile, vogliamo disabilitare questo comportamento. È sufficiente aprire galleria.classic.js (o il vostro tema Galleria javascript file), e sostituire la linea:

css: 'galleria.classic.css', 

con:

css: false, 

Questo dirà Galleria di non provare a caricare il foglio di stile.

Un'altra cosa: quando provavo a compilare queste risorse, mi sono imbattuto in quello che apparentemente è un bug in Rails 3.1.0. Quando ho eseguito rake assets:precompile, ho ottenuto gli errori come:

$ bundle exec rake assets:precompile 
rake aborted! 
classic-loader.gif isn't precompiled 
    (in /vendor/assets/stylesheets/galleria.classic.css.scss) 

lunga storia breve, è necessario impostare questa linea in config/environments/production.rb:

config.assets.compile = true 

Questo non dovrebbe essere necessario un tempo 3.1.1 viene rilasciato.

+2

Non mi piace cambiare il codice della libreria, cioè cambiare 'url (...)' in 'image-url (...)'. Proverò a farli rimanere nella cartella pubblica. – crispy

+0

Né, ma sembra che la modifica del codice della libreria sia l'unico modo per ottenere i fantastici benefici della pipeline di asset di Rails 3.1. –

+0

Ci sono dei fantastici vantaggi per le immagini referenziate nei fogli di stile? Impronte digitali ...? – crispy

3

Mi piace il suggerimento di Arjen, anche se penso che vendor/assets/libs sia più appropriato. Qui è la mia messa a punto:

in config/application.rb

config.assets.enabled = true 
config.assets.paths << "#{Rails.root}/vendor/assets/libs" 

in App/attività/javascript/application.js

//= require galleria/galleria-1.2.6.min.js

Per inizializzare:

Galleria.loadTheme('assets/galleria/themes/classic/galleria.classic.min.js'); 
$('#gallery').galleria(); 

Si noti come il percorso passato a loadTheme() inizia con 'a ssets'.

Mi piace questa configurazione perché mantiene intatta la cartella galleria. Inoltre, concatena galleria-1.2.6.min.js sul mio file js principale (una richiesta HTTP in meno).

+0

Ho provato anche questa soluzione, ma ciò che funziona nello sviluppo si interrompe nella produzione. Posso provare loadTheme ('assets/gall ...') o loadTheme ('/ assets/gall ...') o qualsiasi altra cosa, non troverà il tema. Tutto ciò che ottengo è: Errore irreversibile: Impossibile caricare il tema su assets/galleria/themes/classic/galleria.classic.min.js, controllare il percorso del tema –

+0

@KarstenS. Le impostazioni che suggerisco si applicano a tutti i livelli di produzione. Prova a cercare le differenze tra il tuo dev e prod, in particolare nella configurazione della tua pipeline di asset. –

Problemi correlati