2014-07-17 36 views
7

Ho creato un gulpfile per configurare un ambiente di lavoro di sviluppo front-end.Come usare gulp per iniettare in un file html i collegamenti per i pacchetti Bower installati

Ecco come funziona:

Lo script prende Bower i pacchetti di definito in bower.json e uscite in alla cartella/pubblica le principali file di ogni pacchetto installato, js e css nelle rispettive cartelle di produzione (/ public/js) (/ public/css).

Gli script avviano anche un'attività di controllo su tutti i file, i file css, js e html e ogni volta che li salva nella cartella di sviluppo (/ src) le loro controparti pubbliche/saranno aggiornate in tempo reale.

In questo modo, semplicemente installo i pacchetti localmente con Bower e eseguendo questo gulpfile avrò i file di produzione pronti nella mia cartella/public, ma ho bisogno di collegarli!

Come detto, la parte mancante è che voglio che lo script scriva i collegamenti a quei file nella testa del mio index.html, in base a quali pacchetti ho deciso di installare da Bower.

Così, ad esempio, se ho scaricato Bootstrap, voglio che lo script inserisca automaticamente nella parte iniziale della mia pagina html il link ai file Bootstrap css e js prima del tag di chiusura del corpo (idealmente).

Ecco il mio script su github, hanno uno sguardo al file README e al gulpfile:

Non so quale approccio e/o se c'è un sorso plugin per utilizzare per conseguire tale, se qualcuno può puntare io nella giusta direzione apprezzerei molto. Grazie.

risposta

5

Per questo attualmente utilizzo gulp-inject, funziona come un incantesimo!

+0

Esattamente quello che stavo cercando, grazie amico. – pwnjack

3

ne dite di semplicemente utilizzando

gulp wiredep 

Esempio:

Aggiungi pacchetto Holder.js al progetto Yeoman/Bower/Gulp esistente.

bower install holderjs --save 

Questo l'ha aggiunto all'array delle dipendenze. Dopo aver bisogno di farlo aggiungere al tuo html usando

gulp wiredep 
Problemi correlati