update tutorial instalar javascript gruntjs bower web-frontend

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



bower windows (2)

Npm y Bower son ambas herramientas de gestión de dependencias. Pero la principal diferencia entre ambos es que npm se usa para instalar los módulos Node js, pero Bower js se usa para administrar los componentes frontales como html, css, js, etc.

Un hecho que hace que esto sea más confuso es que npm proporciona algunos paquetes que también pueden usarse en el desarrollo de jshint para jshint , como grunt y 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, un componente.

Edit : Grunt es bastante diferente de Npm y Bower. Grunt es una herramienta de corredor de tareas javascript. Puedes hacer muchas cosas usando el gruñido que tenías que hacer manualmente de otra manera. Destacando algunos de los usos de Grunt:

  1. Zipear algunos archivos (ej. Plugin zipup)
  2. Linting en archivos js (jshint)
  3. Compilar menos archivos (grunt-contrib-less)

Hay complementos grunt para compilar sass, uglificar tu javascript, copiar archivos / carpetas, minar 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 donde pertenece este paquete. Si es un módulo de nodo (como grunt, request), irá en package.json de lo contrario a bower json.

Pregunta 2

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

No importa si está instalando paquetes explícitamente o mencionando la dependencia en el archivo .json. Supongamos 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 ''request''
  • npm instalar

O

  • Use la línea de comandos: npm install --save request

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

Usted puede hacer esto de cualquier manera, no habrá una diferencia sustancial.

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 archivos para listar dependencias (como el archivo Gemfile)

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

Por lo que sé,
la bower install ejecutará el paquete y lo colocará en el directorio /vendor ,
ejecutando npm install lo buscará y lo pondrá en el directorio /node_modules .

Esta respuesta de SO dice que bower es para front-end y npm 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, por lo que estoy totalmente confundido aquí.

Intuitivamente supongo que

  1. npm install --save-dev nombre-paquete sería equivalente 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 las herramientas de la línea de comandos de manera global)?

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 construcción y flujos de trabajo, ¡pero lo que está más actualizado en 2016 no es usar Bower, Grunt o Gulp en absoluto! ¡Con la ayuda de Webpack puedes hacer todo directamente en NPM!

No me malinterprete, la gente usa otros flujos de trabajo y yo sigo usando GULP en mi proyecto heredado (pero me mudo lentamente), ¡pero así es como se hace en las mejores compañías y los desarrolladores que trabajan en este flujo de trabajo hacen 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

  • Webpack
  • NPM como herramienta de compilación (no 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 necesarias para la compilación están en "devDependencies", es decir, npm install require-dir --save-dev (--save-dev actualiza su package.json al agregar 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 las herramientas de la línea de comandos de manera global)?

Siempre Sólo por la comodidad. Cuando agrega un indicador ( --save-dev o --save ), el archivo que administra deps (package.json) se actualiza automáticamente. No pierdas tiempo editando dependencias en él manualmente. npm install --save-dev package-name directo para la npm install --save-dev package-name es npm i -D package-name y acceso directo para npm install --save package-name es npm i -S package-name