GRUNT VS GULP

CONFIGURACIóN VS CóDIGO

@angel_fire





Keep it simple, make it general, and make it intelligible.
Douglas McIlroy



Una breve historia de Grunt

In the end, I realized that a task-based build tool with built-in, commonly used tasks was the approach that would work best for me. Unfortunately, I couldn’t find a build tool that worked the way that I wanted. So I built one...



Instalar grunt

$ npm install -g grunt-cli



Scaffolding con grunt

$ npm install -g grunt-init 

Creación de un proyecto


Manual

$ npm init
$ npm install grunt --save-dev$ touch Gruntfile.js


Con grunt-init

$ grunt-init jquery 

¿Para qué grunt?

  • concatenar ficheros
  • minificar ficheros
  • compilar sass & compass, less, stylus, coffescript, handlebars, jade
  • crear sprites
  • ejecutar scripts de shell
  • minificar imágenes
  • servidores web
  • livereload
  • watch
  • jshint
  • etc (end of thinking capacity)
 

configuracion "sencilla"

fácil ejecución de tareas rutinarias

Grunt

+

Bower
+
Yeoman

Un

 contrincante

apareció







Una breve historia de Gulp



Gulp is a new, fast & light, streaming build system. While evaluating it for @yeoman I created some plugins for it: http://j.mp/1fnwFpv



Made by Fractal




Stream-based build system
Código sobre configuración
Pequeños módulos para node "idiomáticos"
Realmente simple con una API elegante



Instalar Gulp

$ npm install -g gulp
$ npm init
$ npm install --save-dev gulp
$ touch Gulpfile.js

¿Streams?

Los streams existen desde los primeros días de unix y nos han demostrado que son una manera confiable de "componer" grandes sistemas a partir de pequeños componentes que hacen una única cosa, pero la hacen absolutamente bien.

En unix los streams se implementan gracias a los pipes ( | )

comando_1 | comando_2 [| comando_3 . . . ] 

NodeJS incorpora un módulo para built-in stream muy similar al de Unix llamado pipe().

Existen 5 tipos de streams: readable, writable, transform, duplex, y "classic".


Encontrar los 10 logs más grandes en la carpeta /var/log/ que no han sido modificados en los últimos 30 días, ordenados por tamaño, excluyendo los que provienen de la carpeta mysql/

find /var/log -type f -name "*.log" -mtime +30 -not -wholename "*/mysql/*" -exec ls -s {} \; | sort -nr | head -n 10 

¿Para qué usar Streams?


En lenguajes como Java o PHP, cada conexión genera un nuevo hilo que potencialmente viene acompañado de 2 MB de memoria. En un sistema que tiene 8 GB de RAM, esto da un número máximo teórico de conexiones concurrentes de cerca de 4.000 usuarios.

Node resuelve este problema cambiando la forma en que se realiza una conexión con el servidor. En lugar de generar un nuevo hilo de OS para cada conexión (y de asignarle la memoria acompañante), cada conexión dispara una ejecución de evento dentro del proceso del motor de Node.



¿Streams?


by Substack


best part about @gulpjs is that people are writing generic, streaming node modules that have nothing to do w/ gulp except the module name :)

(Sí, es el mismo loco que escribió Javascript  for cats)

API de Gulp


gulp.src(globs[, options])

gulp.src('./client/templates/*.jade')
    .pipe(jade())
    .pipe(minify())
    .pipe(gulp.dest('./build/minified_templates')); 


gulp.dest(path)

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates')); 


API de Gulp


gulp.watch(glob[, opts, cb])

gulp.watch('js/**/*.js', function(event) {
  console.log('File '+event.path+' was '+event.type+', running tasks...');
});

gulp.task(name[, deps]), fn

gulp.task('somename', function() {
  // Do stuff
}); 



¿task, watch, src, dest es todo?

Gulp usa Orchestrator

¿Qué significa eso?

Orchestrator es un módulo para la ejecución de tareas (y sus dependencias) con la máxima concurrencia posible.

¿Qué hay debajo de los pipes?



Virtual file format



432 plugins para Gulp y contando... 

(Febrero 2014 - 1522 plugins abril 2015)


¿Está listo Gulp para "reemplazar" a Grunt?









El ecosistema necesita crecer y madurar un poco más...

Yeoman Generator


  • CSS Autoprefixing (new)
  • Built-in preview server with LiveReload
  • Automagically compile Sass
  • Automagically lint your scripts
  • Awesome Image Optimization (via OptiPNG, pngquant, jpegtran and gifsicle)
  • TODO: Mocha Unit Testing with PhantomJS
  • TODO: Optional - Leaner Modernizr builds (new)


El Futuro


Node-Task (on hold)

Este proyecto pretende definir una API donde todos los task runners puedan ser usados...






Grunt 1.0 Alpha ahora usa Orchestrator


¿Cuál es la diferencia entonces?

La misma, configuración vs código 



¡Gracias!


The Origin of Unix Pipes

En un trozo de papel escrito a máquina, Doug McIlroy describe tubos mucho antes de la llegada de Unix.

The Unix Oral History Project

Doug McIlroy
Michael S. Mahoney

Douglas McIlroy

Varios comandos y herramientas de Unix como:
  • spell
  • diff
  • sort
  • join
  • graph
  • speak 
  • tr
  • etc....

¡Gracias!

@angel_fire



GRUNT VS GULP

By Andrés

Loading comments...

More from Andrés