Gulp es una herramienta muy útil que nos permite automatizar procesos y ejecutar tareas repetitivas con mayor facilidad. Gulp es sumamente fácil de utilizar en cualquier proyecto si te dedicas en el mundo del desarrollo Frontend.

Mi experiencia sin gulp

Antes de que conociera esta herramienta, mi trabajo como diseñador web era muy tedioso, ya que en un solo proyecto tenía que ejecutar muchas tareas continuas esto provocaba demasiada perdida de tiempo en el desarrollo.

Por ejemplo:

  • Compilación de archivos SASS a CSS
  • Compilación de archivos Pug a HTML
  • Utilizar herramientas externas para colocar prefijos al CSS (soporte de navegadores)
  • Minificación de archivos CSS y HTML
  • Minificación de imagenes (muy desesperante)
  • Creación del archivo sitemap
  • Creación de archivo robots
  • Mover archivos de una carpeta a otra
  • Validación de sintaxis
  • No ver los cambios en tiempo real en diferentes dispositivos

Entendiendo a profundidad gulp

Gulp es un sistema diseñado tal cual para la automatización de tareas y está escrito en NodeJs. La parte principal del desarrollo con gulp es la creación de tareas. Las tareas procesan datos a través de pipes (conductos) es decir: leen fácilmente estos datos de un archivo y después los llevan a un lugar de destino utilizando este método de pipes.

Funcionamiento de gulp

Instalación de Gulp

Prerrequisitos

Como ya se mencionó, gulp se basa en NodeJs y NPM, por ende para poder utilizarlo, debemos instalar esta herramienta que se puede descargar desde el sitio oficial, (NPM se instala junto con él).

Instalación

  • La instalación de gulp es muy simple y se realiza usando NPM, el administrador de paquetes de NodeJs. Primero antes que todo, se necesita instalar el paquete de gulp de manera global, para eso se ejecuta el siguiente comando:
npm install gulp-cli -g
  • El siguiente paso es abrir la carpeta de nuestro proyecto, supongamos que hay un proyecto llamado (special-cs 📂), dentro de esa carpeta ejecutaremos otro comando:
npm init

Este comando crea un archivo llamado package.json en el directorio.

El archivo gulpfile.js

Dentro de la carpeta raíz (special-cs 📂) se debe crear el archivo llamado gulpfile.js ¿esto para qué?, cuando se ejecuta el comando gulp, buscará este archivo y lanzará la tarea predeterminada (task default) escrita en él.

Se puede especificar qué tarea se desea iniciar agregando el nombre como argumento al comando gulp de esta manera:

gulp nombreTarea

Estructura del proyecto

Dentro de la carpeta raíz, debemos crear dos carpetas llamadas Source y Build. En la carpeta source, colocaremos todos los archivos de código de nuestro proyecto, que posteriormente serán procesados por nuestras tareas de gulp, y el resultado se colocará en la carpeta build.

  • source 📁
  • build 📁
  • gulpfile.js 📝
  • package.json 📝

Escribiendo una tarea

Primer tarea con gulp

Antes de ejecutar la tarea creada, crearemos algunos archivos en la carpeta source. Se creará un archivo index.html con el contenido que sea.

Ahora ya podemos ejecutar la tarea gulp copiar , después debería ver una copia de index.html en la carpeta build.

Instalando plugins de gulp

Para instalar plugins de gulp, usaremos el siguiente comando:

npm install nombre-plugin --save-dev

La palabra --save-dev le dice a npm que guarde el plugin como una dependencia de desarrollo en nuestro archivo package.json.

Creando tareas con los mejores plugins de gulp

Tarea de SASS

Para compilar archivos SASS en CSS usaremos el plugin gulp-sass, necesitamos instalarlo primero:

npm install gulp-sass --save-dev

Crearemos un archivo SASS llamado styles.scss en la carpeta source, después agregaremos la tarea llamada SASS a nuestro gulpfile.js para que se vea así:

Escribiendo la tarea de SASS

Ahora solo queda ejecutar la tarea sass gulp sass y se debería de ver los archivos styles.css en la carpeta build.

Tarea HTML

Trabajaremos con el plugin gulp-htmlmin para minimizar el código HTML.

Escribiendo tarea de HTML

Plugins más utilizados en Gulp

  • Browser-sync: Este es un plugin que recarga el navegador en tiempo real cada vez que hacemos un cambio en nuestro código.
  • Gulp-pug: Compila todos los archivos pug.js en archivos HTML, esta tarea se puede aplicar como la tarea de SASS.
  • Gulp-imagemin: Este plugin es bastante usado por los desarrolladores ya que permite minificar todas las imagenes de cualquier extención de nuestro proyecto.
  • Gulp-sftp: Este plugin permite crear una tarea de carga, que compilará y luego cargará nuestros archivos en un servidor.

Conclusión

Actualmente llevo desarrollando proyectos web (pequeños y grandes) por casi 2 años. He estado trabajando con gulp aproximadamente por 5 meses, fue una de las mejores cosas que conocí y que hoy en día aún sigo aprendiendo. Esta herramienta me ha facilitado mucho mi flujo de trabajo a medida de que con tan solo escribir una orden en una línea de comandos me ejecuta todas esas tareas que antes para mí eran imposibles de ejecutar todas a la vez.