Iniciando con Gulp

2 respuestas

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:

  1. 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.

  2. 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

  1.     2. Obtendrá todos los archivos en el directorio js que terminen con .js y en caso de tener      haber subdirectorios tambien buscara ahi dentro.

  1. .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).

Referencia

Gulp CLI

Oja de trucos Gulp (cheatsheet)