javascript - que es web pack

¿Cuáles son las diferencias entre Grunt, Gulp.js y Bower? ¿Por qué y cuándo usarlos?

Question

¿Cuáles son las diferencias entre Grunt, Gulp.js y Bower? ¿Por qué, cuándo y cómo usarlos?

He visto hoy en día que la mayoría del proyecto de usuario usa las herramientas anteriores, aunque las estoy usando como en mi proyecto reciente. Estoy usando gulp para crear HTML, CSS y JavaScript usando script como

$ gulp build

pero no tengo mucha comprensión de todos estos frameworks de front-end, me ayuda a obtener una comprensión general de Grunt, Gulp.js y Bower.

Answer 1

Acabo de completar un análisis de Gulp vs Grunt (nuestro estándar anterior) y, aunque creo que ambos son importantes para que un desarrollador front end sea actual y ambos sean buenas soluciones, aprendo a Gulp para futuros proyectos por las siguientes razones:

1. Gulp es generalmente más conciso (los complementos solo hacen una cosa y se acerca) y es legible. Una secuencia de comandos de Grunt que redirigí en Gulp dio como resultado solo una cuarta parte de las líneas de código para producir el mismo resultado.

2. Gulp es más rápido en general.

3. Aunque Gulp tiene menos complementos y complementos de teclas de documentación más delgadas para la minificación, la concatenación, el listado, la transpilación MENOS, etc., están actualmente disponibles y funcionan bien.

Answer 2

Básicamente, con mucha agitación de detalles, Gulp y Grunt son sistemas para automatizar series de tareas interdependientes, comúnmente utilizadas para definir la "construcción" de su proyecto, como una versión moderna de la herramienta make . Normalmente, un proyecto usa uno de ellos o el otro, pero no ambos al mismo tiempo (para las mismas partes, de todos modos).

Bower es diferente y se usa con frecuencia con Gulp o Grunt: es un administrador de paquetes para bibliotecas del lado del cliente, lo que facilita mantener esas bibliotecas actualizadas, especificarlas y sus dependencias de manera estandarizada, y así sucesivamente.

The Gulp one-liner de su sitio web:

Automatice y mejore su flujo de trabajo

The Grunt one-liner de ellos:

El corredor de tareas de JavaScript

Y Bower:

Un administrador de paquetes para la web

¿Por qué y cuándo usarlos?

Creo que lo anterior cubre eso para Gulp y Grunt: si tiene tareas que desea automatizar (como crear la versión de lanzamiento de un sitio web con minificación, concatenación, compresión, etc. o ver archivos para cambios y volver a ejecutar tareas cuando cambiar para apoyar el desarrollo rápido), puede usar Gulp y Grunt para eso.

Pero no son solo construcciones. Puede usar Gulp y Grunt para cualquier serie de tareas que necesite automatizar.

Bower es útil para administrar las bibliotecas del lado del cliente en sus proyectos. Puede usar Bower para instalar, por ejemplo, la última versión de Bootstrap, y colocará los archivos relevantes en ubicaciones estándar en su proyecto. Bower puede actualizar esos archivos si sale un Bootstrap más nuevo. Si una biblioteca depende de otras bibliotecas (JS de Bootstrap se basa en jQuery, por ejemplo), Bower ayuda a administrar ese árbol. Existen algunas tareas útiles para Grunt (y supongo que para Gulp) que incluso pueden automatizar la adición del script y las etiquetas de enlace a su HTML para esas bibliotecas, al tener un marcador en el código fuente que básicamente dice "poner aquí las bibliotecas de Bower".

Answer 3

para continuar en la publicación de TJ Crowder, Bower es bastante similar a NPM, o Compositor o Gema. La mayor diferencia entre NPM y Bower es que Bower es para paquetes frontend, mientras que NPM (solía ser) para paquetes back-end. NPM ahora tiene paquetes frontend y paquetes back-end.
Además, necesita NPM para instalar Bower.

Grunt fue el primero de estos autómatas de tareas frontend que estaba disponible. Dio una mejor experiencia que la que estaba disponible en ese momento. Todavía tiene muchos seguidores y una comunidad activa.

Gulp vino del gruñido, en cierto modo, y lo mejora mediante el uso de secuencias, no archivos.

Grunt escribe cambios en un archivo y los carga en ese archivo para manipularlos un poco más. Gulp lee un archivo y realiza todas las transformaciones en el flujo de datos, y solo escribe una vez que se han realizado todas las manipulaciones. Significa que es asincrónico y más rápido que el gruñido. Y creo que Gulp debería usarse para nuevos proyectos a favor del gruñido.
Probablemente haya grandes casos de uso en los que las preformas de gruñido son mejores que el trago, pero generalmente el trago es más rápido.

Answer 4

gulp y Grunt son corredores de tareas. Son enfoques diferentes para el mismo problema. Grunt utiliza un enfoque basado en la configuración, mientras que gulp usa flujos del node para lograr el resultado. Los usa para definir cómo y qué tareas ejecutar (copiar archivos, agregar pancartas, reemplazar texto, verificar estilos, etc.). Se ejecutan (normalmente) desde la línea de comando, de forma manual.

Por ejemplo, si copia y modifica archivos, Grunt creará archivos intermedios y gulp aprovechará las transmisiones del node y se transformará sobre la marcha.

Cuándo utilizar Grunt o gulp es una respuesta menos específica porque tiene en cuenta las preferencias personales, el soporte tecnológico (complementos para ciertas tareas), los detalles del proyecto y la facilidad de configuración. Ambos son relativamente fáciles de poner en funcionamiento, pero por lo general terminarás eligiendo uno que tenga mejores complementos para la pila de tecnología utilizada para tu proyecto (aunque ambos tienen buenos complementos).

Bower es el administrador de paquetes. Se usa para instalar paquetes javascript (principalmente del lado del cliente) (sin embargo, npm , también el administrador de paquetes, también contiene casi todos esos módulos / paquetes. Se usa para automatizar la administración de dependencias y la instalación de paquetes.