2015-03-14 4 views
9

Sto cercando di imparare le ultime tecnologie per lo sviluppo web. Conosco già HTML, JS, CSS e programmazione lato server. Ma non capisco dove Nodejs, npm e Bower entrare.Confuso su Node, NPM, Bower e usandolo per Bootstrap

Voglio creare un nuovo progetto. Così ho creato una cartella per questo. Quindi volevo usare il bootstrap. Quindi ho eseguito bower install bootstrap. Ora ho bootstrap installato in una cartella denominata bower_components. Significa questo, se voglio importare Bootstrap, devo aggiungerlo in questo modo ?:

<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

O mi manca qualcosa. Onestamente non so da dove cominciare con questi gestori di pacchetti.

+0

Ora il tuo prossimo passo è imparare a usare 'gulp.js' e fare in modo che il gulp faccia tutti i tuoi passi di costruzione. Ciò includerebbe la copia su bootstrap/dist/css/bootstrap.min.css e tutti gli altri css in, ad esempio, 'public/css', e fare tutte le minicificazioni e concatenazioni di JS e CSS e rendere pubblica la tua cartella/cartella qualcosa come 6 file (su 150 con cui lavori nel progetto) che useresti per l'implementazione della produzione :) – Zlatko

+0

@Zlatko Interessante ... Grazie! – AskYous

risposta

18

bower - per l'installazione di librerie lato client/moduli (ad esempio: jquery, bootstrap, ecc angolare), Dettagli modulo generalmente messi in bower.json della cartella principale del progetto

npm - per l'installazione di moduli sul lato server (esprimere , crypto, socket.io, ecc.), i dettagli del modulo generalmente inseriti nella cartella radice del progetto sono package.json.

In generale, le cose che si installano usando npm vengono memorizzati nella cartella node_modules e bower lo mette in bower_components,

Io parto dal presupposto che si sta utilizzando il modulo express sul node.js server. Quando si aggiunge una linea come:

app.use(express.static(__dirname+ '/bower_components')); 

Ora i vostri file HTML, può utilizzare i componenti Bower come

<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

Un'altra opzione è quella di modificare .bowerrc e specificare dove i moduli Bower scaricati devono essere messi ..

+0

incredibile, questo è quello che sto cercando! grazie per la grande risposta – Kadugedeboy