Guía de gulp, qué es y como se instala

Hola amigos esta vez les vengo a enseñar un automatizador de tareas o task runner en inglés, que nos ayuda demasiado a la hora de estar programando, o creando un nuevo proyecto, a muchos les ha pasado que cuando estamos creando un sitio web, tenemos que estar agregando cosas manualmente, como los prefijos de compatibilidad con los navegadores, o minificando archivos como css, bueno esto se acabó por que tenemos un automatizador de tareas llamado gulp.

¿Pero qué es gulp?

Gulp es un automatizador de tareas que sirve para facilitarnos muchos procesos a la hora de programar o desarrollar proyectos, gulp está creado en node.js y usa el sistema de manejo de paquetería npm, (node package manager), que nos ayuda a instalar dependencias y complementos para nodejs de manera fácil y rápida, nosotros nos apoyamos mucho de estos servicios, es más hay muchas tareas que son necesarias y que cuesta estar haciendo manualmente, entonces buscamos ayuda y esta es una de ellas.

¿Dónde descargo gulp?

Tu puedes ir al sitio oficial aquí Ir al sitio oficial, una vez estando ahí es muy fácil orientarse ya que la documentación es muy simple y muy clara, bueno yo te explico por si se te complica.

¿Cómo instalo gulp?

Bueno el proceso es bien simple solo tienes que seguir los siguientes pasos:

  • abrir una nueva terminal y escribimos el siguiente comando npm install -g gulp, esto nos instala gulp de forma global para utilizarlo donde sea en nuestra computadora.

  • Creamos una nueva carpeta donde vamos a empezar a trabajar en un nuevo proyecto.

  • Dentro de la carpeta que creamos, ahora nos toca crear un archivo llamado package.json, lo creamos y dentro del archivo solo abrimos y cerramos llaves así como estas: {}

  • Dentro de la carpeta abrimos una nueva terminal y tipeamos el siguiente comando: npm install --save-dev gulp, eso nos instala las dependencias necesarias para poder empezar a instalar paquetes y complementos.

  • Una vez hecho esto, veremos que nuestro archivo package.json cuenta con la versión más reciente instalada, para poder empezar a trabajar.

¿Requisitos antes de empezar a utilizar gulp?

Para poder utilizar gulp tu ya tienes que tener instalado en la computadora node.js y npm de manera global, eso lo puedes hace yendo a la página oficial de node.js y teniendo todo en orden como te lo enseñan en la documentación, una vez instalado, ya puedes empezar a trabajar con gulp.

¿Qué puedo hacer con gulp?

Con gulp hay un sin fin de tareas que puedes hacer, desde agregar prefijos hasta realizar pruebas en php o crear controladores y módulos especiales para Angular.js, pero si deseas ver todo lo que se puede hacer es fácil solo tienes que ir aquí Plugins oficiales donde encuentras todos los plugins actualmente disponibles con su respectiva información.

¿Qué necesito saber para utilizar gulp?

Prácticamente solo necesitas saber programación básica y orientada a objetos, pero tranquilo que si no sabes no tienes de qué preocuparte, ya que gulp no es ni un lenguaje ni un framework de programación así que sus tareas son bien simples de realizar, bueno es más te recomiendo que leas la documentación, pero te recomiendo más aún que si no sabes mucho de programación y eres novato, no te metas tanto en esto, primero aprende a desarrollar bien y luego te enfocas en buenas prácticas y tareas.

¿Cómo empiezo a trabajan con gulp?

Bueno es muy fácil sol tienes que ir a la página oficial dirigirte a la parte de los plugins y hacer clic en el que quieres, ahí mismo te indican que hacer que opciones tiene y que parámetros se usan, ya solo es cuestión de crear tu primer tarea y listo en un archivo llamado gulpfile.js.

Ejemplo de una tarea creada en gulp:

por ejemplo si queremos minificar un css nos vamos a los plugins y buscamos la tarea que lo realice para este ejemplo usaremos gulp-css-minify así que en la misma terminal que teníamos abierta escribimos esto npm install --save-dev gulp-minify-css y se nos instala el respectivo plugin

       var gulp = require('gulp');//variable que llama a gulp
    var minifyCSS = require('gulp-minify-css'); //variable que llama al plugin

    gulp.task('minify-css', function() { //función llamada minify-css
    return gulp.src('./static/css/*.css')//carpeta donde se encuentra el archivo a minificar
    .pipe(minifyCSS({keepBreaks:true}))// minifica el archivo
    .pipe(gulp.dest('./dist/'));// carpeta destino
    });

Guardamos y luego en la misma terminal escribimos gulp + el nombre de la tarea en este caso gulp minify-css y eso ejecutará nuestra tarea

Vídeo tutorial de gulp:

todo esto es solo el inicio si deseas seguir viendo como trabajar en gulp te recomiendo te suscribas a mi canal de youtube o te subscribas a este blog hackemate canal oficial