es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


La batalla de compilar guiones: Gulp Vs Grunt

Ya he escrito sobre cómo comenzar con Gulp y sobre cómo empezar a trabajar con Grunt. Ambos automatizan nuestras tareas, ambos usan Node, y ambos requieren que cree tareas e instale complementos de algún tipo. Pero ¿te preguntas acerca de la diferencia entre los dos, o incluso, que es mejor?

En este artículo, me centraré principalmente en las diferencias entre estos dos proyectos que pueden influir en ayudarte a decidir cuál de los dos puedes considerar mejor para ti. Usaré algún código que puede ser desconocido. Si es así, sugiero leer los dos artículos previamente publicados antes de comenzar.

Más sobre Hongkiat.com

  • Cómo comenzar a Gulp
  • Cómo comenzar a trabajar con Grunt

Velocidad

La principal diferencia entre Gulp y Grunt reside en cómo manejan sus tareas de automatización en el interior . Gulp usa flujos de nodo mientras Grunt usa archivos temporales. Vamos a poner eso en inglés simple, ¿de acuerdo?

Suponga que le gustaría escribir el código SASS para su proyecto. Desearía compilar su código SASS y quizás minificarlo.

Grunt maneja esto usando archivos intermediarios que son operaciones de E / S de disco. Su archivo SASS se compila y luego se escribe en un archivo temporal. El archivo temporal es utilizado por el autoprefixer y luego el producto final se escribe en el archivo de destino.

Gulp se ocupa de todo esto en la memoria . Su archivo fuente SASS se compila, el resultado se pasa al autoprefixer sin que se escriba en un archivo y luego se escribe el archivo de destino.

En comparación con las operaciones en memoria, las grabaciones en disco son lentas, lo que significa que Gulp tiene una gran ventaja de velocidad (por ahora). Tech.tmw realizó una comparación de velocidad que muestra que la mayoría de las tareas son al menos dos veces más rápidas en Gulp. Si bien este no fue un estudio muy científico, la tendencia está ahí y he visto lo mismo con mis propios proyectos. ¿Pero qué tan grande de impacto es la diferencia en velocidad?

Diferencia en segundos

Para la mayoría de los proyectos, esto no tendrá importancia. La mayoría de los proyectos son pequeños . Cuando crea un tema de WordPress o algo similar, la cantidad de archivos con los que debe trabajar está dentro de un límite razonable. Realmente no importa si tus hojas de estilo están compiladas en 400ms o 800ms.

Además, la mayoría de los proyectos se pueden estructurar de tal manera que algunos de los temas más intensivos puedan eludirse . Si tiene 50 archivos SASS, puede concatenarlos con la misma rapidez durante el desarrollo, no será necesario que los autoprefique ni los minimice. No será necesario que optimice las imágenes cada vez que guarde un proyecto, y así sucesivamente.

Incluso cuando realmente necesita las armas grandes porque está empujando su trabajo a un servidor de etapas o cuando está actualizando un repositorio, ¿hace un tiempo construido de 5 segundos o 9 segundos una gran diferencia?

Para colmo, Grunt agregará soporte para tuberías en la próxima versión 0.5 que acelerará las cosas considerablemente, convirtiendo esto en un punto discutible.

La comunidad

Grunt ha existido por mucho más tiempo que Gulp, por lo que tiene una base de usuarios significativa. Actualmente, Grunt recibe alrededor de 37, 000 descargas por día en promedio, Gulp obtiene un poco más de la mitad, cerca de la marca de 23, 000. Habiendo dicho eso, Gulp solo ha estado presente por un año y medio, haciendo que ese número sea respetable por decir lo menos.

Grunt actualmente tiene más de 4000 complementos, mientras que Gulp tiene más de 1200 complementos. Según las tendencias de Google, cada vez más personas buscan cosas relacionadas con Grunt, hay más foros que se ocupan de eso y, en general, más apoyo de la comunidad.

Por supuesto, Gulp está arriba y viene, lo que significa que es probable que iguale en el largo plazo . Sin embargo, esta es una barrera para algunos desarrolladores, especialmente aquellos que trabajan en proyectos basados ​​en Grunt.

Me gustaría señalar que las comunidades para ambos son extremadamente agradables . Hasta donde puedo decir, la relación entre los líderes en cada comunidad es asombrosa, y debe servir como un ejemplo para todos. El creador de Gulp en realidad ayudó al escritor de la comparación de la prueba de velocidad a mejorar las precisiones de tiempo que conducen a una disminución en las diferencias de tiempo. ¡Eso es lo que llamo un caballero!

Configuración del Código Vs

Aparentemente este es el punto de inflexión para muchos, pero para ser honesto, no puedo ver el problema aquí personalmente.

El argumento es el siguiente: Gulp es un buen ejemplo de que el código sobre la configuración puede ser una buena cosa cuando la configuración se vuelve un poco confusa . Otras personas dicen que si bien esto es cierto y que Gulp es más fácil de leer, es más difícil de escribir porque las tuberías pueden ser un poco confusas .

Antes de engordar, aquí está el mismo ejemplo primero en Grunt, luego en Gulp:

 grunt.initConfig ({sass: {dist: {archivos: [{src: 'dev / *. scss', dest: '.tmp / styles', expandir: true, ext: '.css'}]}}, autoprefixer : {dist: {archivos: [{expand: true, cwd: '.tmp / styles', src: '{, * /} *. css', dest: 'css / styles'}]}}, watch: { styles: {files: ['dev / *. scss'], tareas: ['sass: dist', 'autoprefixer: dist']}}}); grunt.registerTask ('default', ['styles', 'watch']); 
 gulp.task ('sass', function () {gulp.src ('dev / *. scss') .pipe (sass ()) .pipe (autoprefixer ()) .pipe (gulp.dest ('css / styles') ));}); gulp.task ('default', function () {gulp.run ('sass'); gulp.watch ('dev / *. scss', function () {gulp.run ('sass');});} ); 

Mi opinión es que realmente no importa. Claro, si estás acostumbrado a la primera manera, es posible que necesites dedicar algo de tiempo a descifrar el segundo, pero esto también es verdad al revés. Entonces, para mí, el argumento "es confuso" es completamente inválido. Cualquier método nuevo que aprenda es confuso al principio, pero si se toma el tiempo para comprender la lógica de cada uno, todo se nivela.

Dicho esto, personalmente prefiero la API de Gulp porque es más limpia, y refleja la forma en que pienso más de cerca que Grunt. Esto es, por supuesto, completamente subjetivo y no es un problema con Grunt en absoluto, es solo mi preferencia personal.

Como escoger

No creo que haya dudas sobre el hecho de que tanto Grunt como Gulp son excelentes herramientas y que han ayudado a las personas a ahorrar innumerables horas a lo largo de los años. Grunt es un poco más lento por ahora, pero tiene una comunidad mucho más grande. Gulp es más rápido, tiene una API más limpia, pero le falta la base de usuarios.

Creo que la decisión finalmente se reducirá a la continuidad, los complementos disponibles y las preferencias .

(1) Si ha estado usando Grunt / Gulp por un tiempo y está contento con él, no hay razón para cambiar.

(2) Si su proyecto requiere complementos que no son proporcionados por Gulp y no está preparado para escribir uno usted mismo, deberá ir con Grunt.

(3) Si las dos consideraciones anteriores no se aplican a usted, se reducirá a la preferencia. Sugiero probar ambos y ver cuál te queda .

Como dije, elegí usar Gulp porque me gusta más su API más limpia, pero me siento perfectamente cómodo usando Grunt si un proyecto lo requiere. Lo que no debe hacer es leer que el Sr. Sabelotodo dijo que Gulp es mejor y lo acepta. Si bien existen diferencias, no hay un ganador claro y ambos proyectos pueden coexistir y lo harán . Pruébalos y toma tu propia decisión.

Nota: también es posible que desee considerar las opiniones de usuarios como Keith Cirkel (un consultor de Javascript) que le aconseja no utilizar ninguno de los dos . En su interesante Por qué deberíamos dejar de usar el artículo de Grunt & Gulp, sugiere usar npm.

Otras lecturas

Hay muchos otros excelentes artículos sobre este tema. Recomiendo encarecidamente cualquiera de los siguientes para una lectura adicional; ¡nunca está de más leer lo que otros tienen que decir!

  • Grunt vs Gulp - Beyond the Numbers (gracias especiales por los ejemplos claros)
  • Gulp, Grunt, lo que sea
  • Elija: Grunt, Gulp o npm?
  • Prueba de velocidad Gulp y Grunt
  • Por qué deberíamos dejar de usar Grunt & Gulp
  • Build Wars (usa flechas para navegar)
  • No es necesario gruñir, tomar un trago de aire fresco

Un vistazo a: fuentes utilizadas en logotipos de marcas populares

Un vistazo a: fuentes utilizadas en logotipos de marcas populares

¿Te encuentras mirando el logo de otro diseñador e inmediatamente intentas descifrar qué tipo de letra están usando? Si eres diseñador, probablemente sea un hábito inevitable. No existen reglas estrictas que lo ayuden a determinar a qué tipo de letra debe acceder para su logotipo. Y debido al hecho de que estamos inundados con miles de frentes gratuitos en Internet, la decisión sobre la fuente ideal para usar puede ser una tarea desafiante.Si ha e

(Consejos de tecnología y diseño)

Comprender el modelo de objetos de documento (DOM) en Detalles

Comprender el modelo de objetos de documento (DOM) en Detalles

Todos hemos oído hablar del DOM, o modelo de objeto de documento, que se menciona de vez en cuando, relacionado con JavaScript. DOM es un concepto bastante importante en el desarrollo web. Sin él, no podríamos modificar dinámicamente páginas HTML en el navegador.El aprendizaje y la comprensión del DOM dan como resultado mejores formas de acceder, cambiar y controlar diferentes elementos de una página HTML. El mo

(Consejos de tecnología y diseño)