Diferencia entre Grunt, NPM y Bower (package.json vs bower.json)

Soy nuevo en el uso de npm y bower, construyendo mi primera aplicación en emberjs :).
Tengo un poco de experiencia con los rieles, así que estoy familiarizado con la idea de los archivos para enumerar dependencias (como el paquete Gemfile)

Pregunta: cuando quiero agregar un paquete (y registrar la dependencia en git), ¿a dónde pertenece: dentro package.jsono dentro bower.json?

Por lo que sé, la
ejecución bower installbuscará el paquete y lo colocará en el /vendordirectorio, la
ejecutará npm installlo buscará y lo colocará en el /node_modulesdirectorio.

Esta respuesta SO dice que bower es para front-end y npm es para cosas de backend.
Ember-app-kit parece adherirse a esta distinción desde el primer vistazo ... Pero las instrucciones en gruntfile para habilitar alguna funcionalidad dan dos comandos explícitos, así que estoy totalmente confundido aquí.

Intuitivamente supongo que

1. npm install --save-dev nombre-paquete equivaldría a agregar el nombre-paquete a mi paquete.json

2. bower install --save package-name podría ser lo mismo que agregar el paquete a mi bower.json y ejecutar bower install ?

Si ese es el caso, ¿cuándo debería instalar paquetes explícitamente así sin agregarlos al archivo que administra las dependencias (aparte de instalar herramientas de línea de comandos a nivel mundial)?

Actualización para mediados de 2016 :

¡Las cosas están cambiando tan rápido que si es a finales de 2017, esta respuesta podría no estar actualizada!

Los principiantes pueden perderse rápidamente en la elección de herramientas de creación y flujos de trabajo, ¡pero lo que está más actualizado en 2016 es no usar Bower, Grunt o Gulp en absoluto! ¡Con la ayuda de Webpack puedes hacer todo directamente en NPM!

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

• Paquete web: https://webpack.github.io/docs/installation.html

No me malinterpreten, las personas usan otros flujos de trabajo y yo sigo usando GULP en mi proyecto heredado (pero poco a poco salgo de él), ¡pero así es como se hace en las mejores empresas y desarrolladores que trabajan en este flujo de trabajo y ganan MUCHO dinero!

Mire esta plantilla, es una configuración muy actualizada que consiste en una combinación de las mejores y las últimas tecnologías: https://github.com/coryhouse/react-slingshot

• Paquete web
• NPM como herramienta de construcción (sin Gulp, Grunt o Bower)
• Reaccionar con Redux
• ESLint
• La lista es larga. ¡Ve y explora!

Tus preguntas:

Cuando quiero agregar un paquete (y registrar la dependencia en git), ¿a dónde pertenece? En package.json o en bower.json

• Todo pertenece en package.json ahora

• Las dependencias requeridas para la compilación están en "devDependencies", es decir npm install require-dir --save-dev(--save-dev actualiza su package.json agregando una entrada a devDependencies)

• Las dependencias requeridas para su aplicación durante el tiempo de ejecución están en "dependencias", es decir npm install lodash --save(--save actualiza su package.json agregando una entrada a las dependencias)

Si ese es el caso, ¿cuándo debería instalar paquetes explícitamente así sin agregarlos al archivo que administra las dependencias (aparte de instalar herramientas de línea de comandos a nivel mundial)?

Siempre . Solo por comodidad. Cuando agrega un indicador ( --save-devo --save), el archivo que administra los deps (package.json) se actualiza automáticamente. No pierdas el tiempo editando dependencias en él manualmente. Atajo para npm install --save-dev package-nameis npm i -D package-namey atajo para npm install --save package-nameisnpm i -S package-name

Npm y Bower son herramientas de gestión de dependencias. Sin embargo, la principal diferencia entre ambos es la NGP se utiliza para la instalación de módulos de nodo js js pero Bower se utiliza para controlar los componentes de front-end como HTML, CSS, JS, etc .

Un hecho que hace que esto sea más confuso es que npm proporciona algunos paquetes que también se pueden usar en el desarrollo front-end, como grunty jshint.

Estas líneas agregan más significado

Bower, a diferencia de npm, puede tener múltiples archivos (por ejemplo .js, .css, .html, .png, .ttf) que se consideran los archivos principales. Bower considera semánticamente estos archivos principales, cuando se empaquetan juntos, como un componente.

Editar : Grunt es bastante diferente de Npm y Bower. Grunt es una herramienta de ejecución de tareas de JavaScript. Puedes hacer muchas cosas usando gruñido, que de lo contrario tenías que hacer manualmente. Destacando algunos de los usos de Grunt:

1. Comprimir algunos archivos (por ejemplo, el complemento zipup)
2. Revestimiento en archivos js (jshint)
3. Compilación de menos archivos (grunt-contrib-less)

Hay grunt plugins para compilar sass, uglificar su javascript, copiar archivos / carpetas, minificar javascript, etc.

Tenga en cuenta que el complemento Grunt también es un paquete npm.

Pregunta 1

Cuando quiero agregar un paquete (y registrar la dependencia en git), ¿a dónde pertenece? En package.json o en bower.json

Realmente depende de a dónde pertenece este paquete. Si es un módulo de nodo (como gruñido, solicitud), irá en package.json de lo contrario a bower json.

Pregunta 2

¿Cuándo debería instalar paquetes explícitamente así sin agregarlos al archivo que administra las dependencias?

No importa si está instalando paquetes explícitamente o si menciona la dependencia en el archivo .json. Supongamos que está trabajando en un proyecto de nodo y necesita otro proyecto, por ejemplo request, tiene dos opciones:

• Edite el archivo package.json y agregue una dependencia en 'request'
• npm install

O

• Usar línea de comando: npm install --save request

--saveopciones agrega la dependencia al archivo package.json también. Si no especifica la --saveopción, solo descargará el paquete, pero el archivo json no se verá afectado.

Puede hacerlo de cualquier manera, no habrá una diferencia sustancial.