Differenza tra Grunt, NPM e Bower (package.json vs bower.json)

Sono nuovo di usare npm e bower, costruendo la mia prima app in emberjs :).
Ho un po 'di esperienza con le rotaie, quindi ho familiarità con l'idea dei file per elencare le dipendenze (come il bundle Gemfile)

Domanda: quando voglio aggiungere un pacchetto (e controllare la dipendenza in git), dove appartiene - in package.jsono in bower.json?

Da quello che raccolgo, l'
esecuzione bower installrecupera il pacchetto e lo inserisce nella /vendordirectory,
eseguendolo npm installlo recupera e lo inserisce nella /node_modulesdirectory.

Questa risposta SO dice che bower è per front-end e npm è per roba back-end.
Ember-app-kit sembra aderire a questa distinzione dal primo sguardo ... Ma le istruzioni nel gruntfile per abilitare alcune funzionalità danno due comandi espliciti, quindi sono totalmente confuso qui.

Intuitivamente lo indovinerei

1. npm install --save-dev nome-pacchetto equivarrebbe ad aggiungere il nome-pacchetto al mio pacchetto.json

2. bower install --save nome-pacchetto potrebbe essere lo stesso dell'aggiunta del pacchetto a my bower.json e dell'esecuzione di bower install ?

In tal caso, quando dovrei mai installare pacchetti così esplicitamente senza aggiungerli al file che gestisce le dipendenze (oltre a installare gli strumenti da riga di comando a livello globale)?

Aggiornamento per metà 2016 :

Le cose stanno cambiando così in fretta che se è la fine del 2017 questa risposta potrebbe non essere più aggiornata!

I principianti possono rapidamente perdersi nella scelta degli strumenti di costruzione e dei flussi di lavoro, ma ciò che è più aggiornato nel 2016 non utilizza affatto Bower, Grunt o Gulp! Con l'aiuto di Webpack puoi fare tutto direttamente in NPM!

• Risultato "npm as build tool" di Google: https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

• Webpack: https://webpack.github.io/docs/installation.html

Non fraintendetemi, le persone usano altri flussi di lavoro e continuo a usare GULP nel mio progetto legacy (ma lentamente mi sto allontanando), ma è così che viene fatto nelle migliori aziende e sviluppatori che lavorano in questo flusso di lavoro facendo MOLTI soldi!

Guarda questo modello è un'installazione molto aggiornata composta da una combinazione delle migliori e delle più recenti tecnologie: https://github.com/coryhouse/react-slingshot

• Webpack
• NPM come strumento di costruzione (no Gulp, Grunt o Bower)
• Reagisci con Redux
• ESLint
• l'elenco è lungo. Vai ed esplora!

Le tue domande:

Quando voglio aggiungere un pacchetto (e controllare la dipendenza in git), dove appartiene - in package.json o in bower.json

• Tutto appartiene a package.json ora

• Le dipendenze richieste per la compilazione sono in "devDependencies", ovvero npm install require-dir --save-dev(--save-dev aggiorna il tuo package.json aggiungendo una voce a devDependencies)

• Le dipendenze richieste per la tua applicazione durante il runtime sono in "dipendenze", ovvero npm install lodash --save(--save aggiorna il tuo package.json aggiungendo una voce alle dipendenze)

In tal caso, quando dovrei mai installare pacchetti così esplicitamente senza aggiungerli al file che gestisce le dipendenze (oltre a installare gli strumenti da riga di comando a livello globale)?

Sempre . Solo per conforto. Quando aggiungi un flag ( --save-devo --save) il file che gestisce i deps (package.json) viene aggiornato automaticamente. Non perdere tempo modificando le dipendenze in esso manualmente. Scorciatoia per npm install --save-dev package-nameis npm i -D package-namee scorciatoia per npm install --save package-nameisnpm i -S package-name

Npm e Bower sono entrambi strumenti di gestione delle dipendenze. Ma la differenza principale tra entrambi è npm per l'installazione dei moduli Node js, ma bower js viene utilizzato per la gestione di componenti front-end come html, css, js ecc .

Un fatto che rende questo più confuso è che npm fornisce alcuni pacchetti che possono essere utilizzati anche nello sviluppo front-end, come grunte jshint.

Queste righe aggiungono più significato

Bower, a differenza di npm, può avere più file (ad esempio .js, .css, .html, .png, .ttf) che sono considerati i file principali. Bower considera semanticamente questi file principali, quando impacchettati insieme, un componente.

Modifica : Grunt è abbastanza diverso da Npm e Bower. Grunt è uno strumento per l'esecuzione di attività javascript. Puoi fare molte cose usando il grugnito che altrimenti dovevi fare manualmente. Evidenziando alcuni degli usi di Grunt:

1. Comprimere alcuni file (ad esempio plugin zipup)
2. Linting su file js (jshint)
3. Compilazione di meno file (grunt-contrib-less)

Ci sono plug-in grugniti per la compilazione di sass, l'ottimizzazione del tuo javascript, la copia di file / cartelle, la riduzione di javascript ecc.

Nota che anche il plugin grunt è un pacchetto npm.

Domanda 1

Quando voglio aggiungere un pacchetto (e controllare la dipendenza in git), dove appartiene - in package.json o in bower.json

Dipende davvero da dove appartiene questo pacchetto. Se è un modulo nodo (come grunt, request), andrà in package.json altrimenti in bower json.

Domanda 2

Quando mai dovrei installare i pacchetti in modo esplicito come quello senza aggiungerli al file che gestisce le dipendenze

Non importa se si installano i pacchetti in modo esplicito o si menziona la dipendenza nel file .json. Supponiamo che tu stia lavorando a un progetto nodo e che tu abbia bisogno di un altro progetto, diciamo request, quindi hai due opzioni:

• Modifica il file package.json e aggiungi una dipendenza da "richiesta"
• npm install

O

• Usa la riga di comando: npm install --save request

--saveoptions aggiunge la dipendenza anche al file package.json. Se non specifichi l' --saveopzione, scaricherà solo il pacchetto ma il file json non sarà interessato.

Puoi farlo in entrambi i modi, non ci sarà una differenza sostanziale.