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

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

Pregunta: cuando quiero agregar un paquete (y registro en la dependencia en GIT), donde le pertenece - en package.jsono dentro bower.json?

Por lo que he recopilado, la
ejecución bower installbuscará el paquete y lo colocará en el /vendordirectorio, al
ejecutarlo npm installlo buscará y lo colocará en el /node_modulesdirectorio.

Esta respuesta SO dice que bower es para front-end y npm es para 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 package-name sería equivalente a agregar el nombre del paquete a mi package.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 como ese sin agregarlos al archivo que administra las dependencias (además 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 fines de 2017, es posible que esta respuesta ya no esté actualizada!

Los principiantes pueden perderse rápidamente en la elección de herramientas de construcció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 "npm como herramienta de compilación" de Google: 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 malinterpretes, la gente usa otros flujos de trabajo y yo sigo usando GULP en mi proyecto heredado (pero saliéndome de él lentamente), pero así es como se hace en las mejores empresas y los desarrolladores que trabajan en este flujo de trabajo ganan MUCHO dinero.

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

• Webpack
• 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 verificar la dependencia en git), ¿a dónde pertenece? En package.json o en bower.json

• Todo pertenece en package.json ahora

• Las dependencias necesarias 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 como ese sin agregarlos al archivo que administra las dependencias (además de instalar herramientas de línea de comandos a nivel mundial)?

Siempre . Solo por comodidad. Cuando agrega una bandera ( --save-devo --save), el archivo que administra deps (package.json) se actualiza automáticamente. No pierda el tiempo editando las dependencias 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 varios 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. Puede hacer muchas cosas usando gruñido que, de lo contrario, tenía que hacer manualmente. Destacando algunos de los usos de Grunt:

1. Comprimir algunos archivos (por ejemplo, el complemento zipup)
2. Linting en archivos js (jshint)
3. Compilar menos archivos (grunt-contrib-less)

Hay complementos grunt para la compilación 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 verificar la dependencia en git), ¿a dónde pertenece? En package.json o en bower.json

Realmente depende de a dónde pertenezca este paquete. Si es un módulo de nodo (como gruñido, solicitud), irá en package.json, de lo contrario, en 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 mencionando la dependencia en el archivo .json. Suponga que está trabajando en un proyecto de nodo y necesita otro proyecto, digamos request, entonces tiene dos opciones:

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

O

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

--saveoptions 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 hacer esto de cualquier manera, no habrá una diferencia sustancial.