Diferença entre Grunt, NPM e Bower (package.json vs bower.json)

Eu sou novo em usar npm e bower, criando meu primeiro aplicativo em emberjs :).
Eu tenho um pouco de experiência com trilhos, por isso estou familiarizado com a idéia de arquivos para listar dependências (como o bundf Gemfile)

Pergunta: quando eu quero adicionar um pacote (e verificar a dependência no git), onde ele pertence - dentro package.jsonou dentro bower.json?

Pelo que pude perceber,
correndo bower installvai buscar o pacote e colocá-lo no /vendordiretório,
executando npm installele vai buscá-lo e colocá-lo em /node_modulesdiretório.

Essa resposta do SO diz que o bower é para front-end e npm é para material de back-end.
O Ember-app-kit parece aderir a essa distinção à primeira vista ... Mas as instruções no gruntfile para ativar algumas funcionalidades fornecem dois comandos explícitos, por isso estou totalmente confuso aqui.

Intuitivamente, eu acho que

1. O npm install --save-dev package-name seria equivalente a adicionar o nome do pacote ao meu package.json

2. instalação do bower --save package-name pode ser o mesmo que adicionar o pacote ao meu bower.json e executar a instalação do bower ?

Se for esse o caso, quando devo instalar pacotes explicitamente assim sem adicioná-los ao arquivo que gerencia dependências (além de instalar ferramentas de linha de comando globalmente)?

Atualização para meados de 2016 :

As coisas estão mudando tão rápido que, se for final de 2017, essa resposta poderá não estar mais atualizada!

Os iniciantes podem se perder rapidamente na escolha de ferramentas de criação e fluxos de trabalho, mas o que há de mais atual em 2016 não é usar Bower, Grunt ou Gulp! Com a ajuda do Webpack, você pode fazer tudo diretamente no NPM!

• Resultado do "npm as ferramenta de criação" do Google: https://medium.com/@dabit3/introduction-to-using-npm-as-a-build-tool-b41076f488b0#.c33e74tsa

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

Não me entenda mal, as pessoas usam outros fluxos de trabalho e eu ainda uso o GULP no meu projeto legado (mas lentamente saindo dele), mas é assim que é feito nas melhores empresas e desenvolvedores que trabalham nesse fluxo de trabalho e ganham MUITO dinheiro!

Veja este modelo: é uma configuração muito atualizada que consiste em uma mistura das melhores e das mais recentes tecnologias: https://github.com/coryhouse/react-slingshot

• Webpack
• NPM como uma ferramenta de construção (sem Gulp, Grunt ou Bower)
• Reagir com Redux
• ESLint
• a lista é longa. Vá e explore!

Suas perguntas:

Quando eu quero adicionar um pacote (e verificar a dependência no git), onde ele pertence - no package.json ou no bower.json

• Tudo pertence ao package.json agora

• As dependências necessárias para a construção estão em "devDependencies", isto é npm install require-dir --save-dev(--save-dev atualiza seu package.json adicionando uma entrada ao devDependencies)

• As dependências necessárias para seu aplicativo durante o tempo de execução estão em "dependências", isto é npm install lodash --save(--save atualiza seu package.json adicionando uma entrada às dependências)

Se for esse o caso, quando devo instalar pacotes explicitamente assim sem adicioná-los ao arquivo que gerencia dependências (além de instalar ferramentas de linha de comando globalmente)?

Sempre . Só por causa do conforto. Quando você adiciona um sinalizador ( --save-devou --save), o arquivo que gerencia o deps (package.json) é atualizado automaticamente. Não perca tempo editando dependências manualmente. Atalho para npm install --save-dev package-nameis npm i -D package-namee atalho para npm install --save package-nameisnpm i -S package-name

Npm e Bower são ferramentas de gerenciamento de dependências. Mas a principal diferença entre ambos é npm é usado para instalar módulos Nó js mas Bower js é utilizado para controlar componentes de front-end como html, css, js etc .

Um fato que torna isso mais confuso é que o npm fornece alguns pacotes que também podem ser usados ​​no desenvolvimento front-end, como grunte jshint.

Essas linhas acrescentam mais significado

O Bower, diferentemente do npm, pode ter vários arquivos (por exemplo, .js, .css, .html, .png, .ttf) que são considerados o (s) arquivo (s) principal (s). Bower considera semanticamente esses arquivos principais, quando empacotados juntos, um componente.

Edit : Grunt é bem diferente de Npm e Bower. Grunt é uma ferramenta de execução de tarefas javascript. Você pode fazer muitas coisas usando o grunhido, que precisaria fazer manualmente caso contrário. Destacando alguns dos usos do Grunt:

1. Fechando alguns arquivos (por exemplo, plugin zipup)
2. Linting em arquivos js (jshint)
3. Compilando menos arquivos (menos grung-contrib)

Existem plugins grunhidos para compilação sass, uglificando seu javascript, copiando arquivos / pastas, minificando javascript etc.

Observe que o plugin grunt também é um pacote npm.

Questão 1

Quando eu quero adicionar um pacote (e verificar a dependência no git), onde ele pertence - no package.json ou no bower.json

Realmente depende de onde este pacote pertence. Se for um módulo de nó (como grunt, request), ele irá para o package.json, caso contrário, para o bower json.

Questão 2

Quando devo instalar pacotes explicitamente assim sem adicioná-los ao arquivo que gerencia dependências

Não importa se você está instalando pacotes explicitamente ou mencionando a dependência no arquivo .json. Suponha que você esteja trabalhando em um projeto de nó e precise de outro projeto, digamos request, então você tem duas opções:

• Edite o arquivo package.json e adicione uma dependência em 'request'
• instalação npm

OU

• Use a linha de comando: npm install --save request

--saveoptions adiciona a dependência ao arquivo package.json também. Se você não especificar a --saveopção, ele fará o download apenas do pacote, mas o arquivo json não será afetado.

Você pode fazer isso de qualquer maneira, não haverá uma diferença substancial.