El automatizar procesos siempre ha sido una de las tareas de los ingenieros y en el área de software no es la excepción a la regla. Con el auge hoy día de los super sets de JavaScript (CoffeScript y demás) y preprocesadores de Css (Sass, less y demás) se convierte algo tedioso e inhumano estar procesando esos archivos manualmente cada vez que es realizado un cambio en uno de estos, así que para ese tipo de tareas y/o tareas particulares que nuestros proyectos requieran lo podremos lograr con lo que hoy se conocen como «Task runners» ahi es donde Gulp hace su entrada.
En este tutorial estaremos viendo uno de los mas nuevos en esta área y es Gulp Es relativamente nuevo pero una vez llego a la vista de los desarrolladores muchos han entrando en una relación seria con este producto.
Gulp
Gulp es un «Task runner» basado en streaming y pipes (Tubo en español) bastante facil de usar, la curva de aprendizaje es de 0-100% en unos mins y luego de la experiencia de un proyecto digamos ya estarán andando a sus anchas con gulp. Gulp corre sobre nodejs y sus plugins son manejados via NPM.
Características
– Facil de usar
– Eficiente
– Facil de aprender
– Código claro al crear tareas.
– Rapido (En comparación con otros task runners)
Gran cantidad de plugins activos para realizar cualquier cosa (Casi cualquier cosa).
Instalación
Requisitos
-Nodejs ( Como instalar nodejs )
npm init npm install -g gulp npm install gulp --save
gulp -v
CLI version 3.8.8 Local version 3.8.10
Todo instalado y listo.
Para poder trabajar con gulp hay que crear un archivo donde tendremos que poner todas las mismas este puede ser llamado gulpfile.js podemos llamarlo de cualquier forma pero si es llamado así no tendremos que especificar el archivo a ejecutar cuando llamemos el comando gulp.
gulpfile.js
// Incluir gulp
var gulp = require('gulp');
gulp.task('tarea1', function() {
return gulp.src('*.js').pipe(gulp.dest('dest'));
});
gulp.task('default', ['tarea1']);
Este ejemplo no hace nada si lo ejecutan, pero nos servirá para nuestros propósitos, aquí estamos usando tres funciones de gulp:
-
gulp.task
Esta funciona es para crear las Tasks de nuestro gulp file, esta función recibe un nombre el cual sera usado cuando sea llamado desde gulp, estas serian las diferentes opciones de gulp.task.
//1 gulp.task('task_name1', function(){ }); //2 gulp.task('task_name2', ['task_name1'], function(){ }); //3 gulp.task('task_name3', ['task_name1', 'task_name2']);1-La primera forma es la forma simple, el nombre de una tarea y el cuerpo de la misma.
2-Esta forma de declarar el task le permite al usuario ejecutar otra tarea antes de ejecutar ella misma.
3.Esta forma es mas bien para declarar set de task por un nombre y ser llamada desde gulp. -
gulp.src
Esta función es para obtener los archivos con los cuales trabajaremos, esta función recibe un patron para obtener dichos archivos.
gulp.task('test',function(){
gulp.src('*.js');
gulp.src('js/**/*.js');
})
Con estos patrones gulp obtendrá:
1.Todos los archivos en el actual directorio que terminen con .js
- 2. Obtendrá todos los archivos en el directorio js que terminen con .js y en caso de tener haber subdirectorios tambien buscara ahi dentro.
-
.pipe()
Esta función es para seguir la cadena de funciones y poder agregarles todos los plugins que quieran, digamos. La función pipe es para pasar cada unos de los archivos que tomamos con el src y ser pasados a un plugin, normalmente (Esta en las especificaciones de como crear un plugin) cada plugin toma un stream y retorna un stream. En el primer ejemplo que tenemos esta tomando todos los stream que esta obteniendo y esta creando una copia de los mismo en un directorio llamado dist.
Podríamos tener algo como esto digamos:
gulp.task('test',function(){ gulp.src('*.js') .pipe(plugin1()) .pipe(plugin2()) })
Una vez entendido el concepto de como funciona gulp seria bueno y recomendable probar uno que otro plugin:
Ejemplo 1: Gulp Concat
Primero instalar el plugin gulp-concat
npm install gulp-concat
// Incluir gulp
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('ejemplo-concat',function(){
gulp.src('*.js')
.pipe(concat('ejemplo1.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('concat',['ejemplo-concat']);
Ejecutar de esta forma
gulp concat gulp ejemplo-concat
Este ejemplo busca todos los archivos en el directorio actual y los concatena y los guarda en una carpeta llamada dist del mismo directorio, en caso de no existir la carpeta el mismo la creara.
Ejemplo 2: Gulp uglify
Primero instalar el plugin gulp-uglify
npm install gulp-uglify
Tareas (Tasks)
// Incluir gulp
var gulp = require('gulp');
var concat = require('gulp-concat');
var ugly = require('gulp-uglify');
gulp.task('ejemplo-concat-uglify',function(){
gulp.src('*.js')
.pipe(concat('ejemplo1.min.js'))
.pipe(gulp.dest('dist'))
.pipe(ugly())
.pipe(gulp.dest('dist'));
});
gulp.task('uglify',['ejemplo-concat-uglify']);
Ejecutar de esta forma
gulp uglify gulp ejemplo-concat-uglify
Este ejemplo hara casi lo mismo que el ejemplo anterior y a eso le sumara que comprimira todo el contenido de el archivo ya concatenado.
Ejemplo 3: Gulp sass
Primero instalar el plugin gulp-sass
npm install gulp-sass
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});
Esta tarea compilara archivos sass que encuentre y guardara el resultado en una carpeta css.
Lo bueno de esto del open source es que hay muchas personas creando cosas y compartiéndolas así que si tienen algún requerimiento solo es buscar y de seguro encontraran un plugin de gulp que los ayude (Gulp Plugins).