Tutorial de Gulp y Sass (primeros pasos)

Gulp es una tecnología de Javascript desarrollada por la comunidad de GitHub que permite (entre otras cosas) la compilación en tiempo real de los archivos Css cuando usamos lenguaje Sass por ejemplo.

En lo personal me gusta combinar Gulp y Sass para mantener mi front-end, aunque Laravel ya tiene integrado el Laravel Mix, yo prefiero usar Gulp y Sass.

En este Tutorial voy a poner los requisitos y primeros pasos que se necesitan para poder compilar nuestro archivo css de nuestro proyecto.

La primera cosa que hay que hacer es recordar que Gulp al ser una tecnología de Javascript requiere de Node Js y su potente npm para gestionar paquetes.

Entonces el primer requisito es instalar Node Js. desde la página principal, puedes hacerlo haciendo clic aquí.

Navegamos hasta la carpeta de proyecto, para el ejemplo usaré la ubicación c:/virtualhosts

cd c:/virtualhosts 
mkdir miproyecto

cd miproyecto

Una vez que hemos creado nuestra carpeta de proyecto e ingresado en ella, procedemos a crear dos directorios. El directorio assets donde irán nuestros archivos de lenguaje Sass, y el directorio css, donde pondremos nuestra hoja de estilos ya compilada.

Antes que nada debemos iniciar npm con el comando:

npm init

Esto nos genera un archivo llamado package.json , podemos llenar la información que nos va pidiendo. En este archivo package.json debemos especificar el nombre del archivo principal de javascript que utilizaremos, en este caso es Gulpfile.js como se muestra en el siguiente código, así debería verse el archivo package.json:

{
  "name": "miproyecto",
  "version": "1.0.0",
  "description": "",
  "main": "Gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Después de haber inicializado npm y especificado el archivo gulp, procedemos a instalar los paquetes que requerimos.

El primer paquete que debemos instalar es Gulp, yo recomiendo instalarlo de manera global:

npm install gulp --save

Cabe mencionar que en ocasiones debemos poner el parámetro -g para que gulp se instale de manera global, de otro modo no podremos utilizarlo en nuestro directorio de proyecto y obtendremos un mensaje de error que dice: "Gulp no se reconoce como un comando de sistema".

Además estamos usando el flag --save para que se guarde como requerimiento en el archivo package.json.

Podrás ver que al instalar gulp y gulp-sass se agrega el directorio node_modules, además podrás ver que el archivo package.json ha cambiado, y ahora contiene como dependencias los paquetes que hemos instalado.

{
  "name": "miproyecto",
  "version": "1.0.0",
  "description": "",
  "main": "Gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.1"
  }
}

Con esto ya estamos listos para comenzar a compilar nuestros archivos de Sass con Gulp y poder llevar un buen control sobre nuestros cambios en el front-end de nuestro proyecto.

En la segunda parte veremos como instalar otros paquetes para minificar y mapear nuestro Css además de comenzar a compilar nuestro primer archivo Css con Gulp Watch mientras hacemos cambios en tiempo real sobre nuestro front-end.