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
$ npm install -g grunt-cliScaffolding 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?
Sí
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?
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 BG
