Si suppone che si colleghino a bower_components nella produzione?

Question

Sono relativamente nuovo nell'utilizzo di Bower e non riesco a capire se si debba collegare a bower_components in produzione. Devo usare un task grunt per collegare o copiare i file di cui ho bisogno da bower_components in una directory separata?

Lo chiedo perché non ho mai visto un sito Web con una directory denominata "bower_components", quindi sono un po 'spaventato. Tutte le guide per principianti si collegano semplicemente a "bower_components/...", come il tutorial angolare.

Answer 1

stai usando Yeoman?

A seconda del Gruntfile.js si dovrebbe avere compiti diversi, uno di questi è 'scrigno-install': questo compito sarà leggere si index.html, trovare il seguente commento blocco

<!-- bower:js --> 
<!-- endbower --> 

e iniettare al suo interno tutte le dipendenze specificate nel bower.json. Ciò significa che l'attività scriverà per tutti i blocchi dello script < src "/ bower_components/.." >.

Non hai mai notato un sito Web con riferimenti "bower_components" perché la tua directory/app è il tuo ambiente di "sviluppo", il tuo progetto sorgente. Dal sorgente verrà creata l'applicazione di produzione che esegue l'attività "build": questa attività è composta da diverse attività secondarie che rendono diversi lavori, uno di questi è concatenando tutti gli script aggiunti dall'attività bower_install in un singolo file js.

Poi c'è un altro compito che minify questo file, un altro che verrà eseguito i test, un altro che creare una directory "dist" dove il vostro sito di produzione risiede e così via ...

Se si utilizza Yeoman voi avere tutte queste attività già configurate in Gruntfile.js, basta aprirlo e cercare di capire cosa fa ogni compito.

A prima vista può essere piuttosto difficile da comprendere, ad esempio l'attività di compilazione si riferisce a 14 o 15 attività secondarie, suggerisco di registrare attività personalizzate che eseguono solo un'attività e vedere cosa succede.

Acclamazioni

Answer 2

Non vedo alcun problema con il collegamento diretto, ma in genere si desidera concatenare tutti gli script in un unico file e risolverlo in modo da ridurre le dimensioni del file per la produzione.

Il grugnito uglify task in grado di gestire entrambe queste cose per voi abbastanza facilmente. Devi solo fornire una serie di file per unirti.

// Project configuration. 
grunt.initConfig({ 
    uglify: { 
    my_target: { 
     files: { 
     'dest/output.min.js': ['src/input1.js', 'src/input2.js'] 
     } 
    } 
    } 
}); 

Answer 3

potete dare il vostro directory di installazione scrigno di un nome migliore creando un file .bowerrc (accanto al file bower.json) e impostando la proprietà directory a qualcos'altro. Per esempio, ho il seguente nel mio .bowerrc:

{ 
    "directory": "public/vendor" 
} 

Poi c'è anche la strettamente legata questione di se o non si dovrebbe essere il check-nel contenuto di questo elenco per il controllo di origine. For a much more in depth discussion of that question, see here.

Infine, come altri hanno già menzionato, si consiglia di concatenare e minimizzare le dipendenze front-end.

Answer 4

È piuttosto comune iniziare semplicemente utilizzando bower_components. Puoi vederlo nello the angular-seed starter project's script references. Una volta che si ottiene la distribuzione di un'applicazione di produzione e il tempo di caricamento e le prestazioni diventano critiche, è necessario considerare la conversione in soluzione per unire e ridurre le dipendenze.