Desarrolladores: Trucos semanales

Flujos de trabajo con Gulp

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende los mejores trucos y tips, y descubre los conceptos básicos indispensable para todo desarrollador web, independientemente de tu experiencia. Si ya llevas desarrollando por años o si vienes del mundo del diseño y jamás has tocado una sola línea de código, todo lo que aprenderás con esta serie semanal de trucos serán una gran adición a tu actividad profesional y apuntalará tus habilidades como programador o desarrollador. Descubre desde increíbles consejos para que puedas tratar con tu cliente y saber cómo cobrar adecuadamente, hasta cuestiones técnicas claves para organizar y gestionar mejor tu tiempo y proyectos desarrollando.
09:16
  Añadir a marcadores

Transcripción

Los automatizadores de tareas son una herramienta básica para todo desarrollador web, pues nos permiten agilizar y automatizar tareas que resultan ser un poco fastidiosas o engorrosas, como la minificación de código, la complicación de código sass o incluso la recarga del navegador, donde estemos probando nuestro código, entre otras tantas actividades. SI bien, en el mercado existen muchas alternativas como el mismo Load, Grunt o CodeKit, Gulp es una de las más populares y fáciles de usar. Tal vez, por el nombre o que porque a primera vista parece puro código es que le tenemos un poco de miedo, pero realmente es una herramienta muy dócil y de fácil uso. Basta con que entiendas la estructura del archivo principal y conozcas los principales métodos que posee para que puedas comenzar a trabajar con flujos en Gulp. Realmente no existe un marcado limitante para el número de procesos que puedas ejecutar, pero sí deberías de ser precavido para el momento en el que estés integrando nuevas tareas a tu flujo de trabajo. Pues Gulp, como toda herramienta, cuántas más actividades le pongas, más memoria RAM consume y tiempo de procesamiento. Lo que puede llegar a alentar otros procesos de tu computadora así que, úsala con cuidado y sabiamente. Pero no te preocupes, las tareas de Gulp solo aplican cuando estás en modo de desarrollo así que cuando publiques tu sitio, este no tendrá absolutamente ninguna dependencia de Gulp. Con esto, como contexto, hagamos nuestra primer tarea con Gulp. Para poder generar un flujo con Gulp necesitamos primero tener un proyecto. En este caso, tenemos un proyecto web, están todas las carpetas vacías pero esta es la estructura que generalmente se llega a utilizar en un proyecto de esta índole. Tenemos la carpeta app que va a incluir a CCS, fonts, imágenes, JS, archivos de sass y nuestro archivo de index.html Nosotros vamos a generar ahora, todo lo necesario para poder trabajar con Gulp. Lo primero que vamos a hacer será activar nuestra línea de comandos y verificar que tenemos instalado Gulp. Si no lo tenemos instalado, tendremos que ejecutar el comando npminstall-gulp. Esto va a provocar la instalación de nuestro proyecto. Una vez que eso termina y que ya tenemos disponible node en el sistema vamos a iniciar nuestro proyecto con NPM, esto quiere decir, que nosotros vamos a crear un paquete de JSON para poder trabajar con Gulp. En este caso, cuando yo lo creo, me dice que no puede generar este proyecto porque tiene una letra mayúscula, entonces, vamos a escribir el nombre my-gulp. Listo. Podemos ir dando Enter realmente a estas partes de la configuración; si tú lo deseas puedes configurarlo de la manera en que más te agrade y después de esto, ya que terminamos de crearlo, vamos a ejecutar un comando llamado npminstallgulp-savedev. ¿Esto qué significa? Que vamos a pegar nosotros a este paquete de JSON, que se acaba de crear, vamos a indicarle en una versión dev que vamos a estar utilizando un módulo de Gulp. Así como tú ves, esas son dependencias de desarrollo y solamente van a estar disponibles en un ambiente de desarrollo. Puedes validar que en la carpeta se encuentre realmente el proyecto de Gulp. Así que, aquí directamente en node modules podemos acceder y aquí podemos encontrar que se encuentra la carpeta de Gulp que podremos ocupar. Realmente, aquí no nos metemos tanto tiempo. Así que, vamos a regresarnos a la línea de comandos y vamos a crear nuestro primer archivo. En este caso, yo voy a crear aquí un archivo que puedo trabajarlo en línea de comandos o con las opciones de acá. Si yo la trabajo con las opciones que incluye Visual Studio Code, puedo dar clic aquí en este botón, en el símbolo de mas, y vamos a escribir el nombre del archivo que será gulpfile.js Como puedes ver, el editor también nos ayuda y agrega un icono que me va a permitir identificar esto de una manera más sencilla. Lo primero que tengo que hacer es invocar a Gulp, para lo cuál, voy a crear una variable llamada Gulp y voy a utilizar require Gulp Con esto, yo ya tengo listo el módulo de Gulp en mi aplicación. Ahora, ¿qué va a continuar? Vamos a trabajar con la primer tarea. La primer tarea realmente es algo sencillo, se compone de Gulp y un método llamado Task, recibe dos parámetros. Lo primero, el nombre de la tarea y lo segundo, lo que se va a ejecutar como función cuando se invoque esta tarea. Vamos a ponerle aquí de nombre "Saludar" y vamos a mandar aquí un console.log y vamos a escribir el nombre: Hola, Yaka. Listo, con esto lo tenemos y simplemente tendremos que invocarlo desde nuestra línea de comandos como Gulp Saludar. Cuando lo ejecutamos vamos a ver cómo aquí aparece el texto de "Hola Yaka", porque tenemos esta tarea. Pero bueno, esta tarea es algo muy sencillo, realmente no requiere de tanto trabajo; hay tareas más sofisticadas como, por ejemplo, el hecho de que nosotros tengamos en nuestra aplicación un archivo de sass y que lo estemos convirtiendo automáticamente hacia archivos de CSS. ¿Cómo podemos trabajar con esta tarea? Muy sencillo. Primero, vamos a instalar un paquete que se llama Gulp Sass. Vamos a hacer esta ventana un poco más grande, para que se pueda ver y este paquete que se llama gulp-sass también lo vamos a guardar como una dependencia de desarrollo. Esto es lo que me va a permitir a mí invocar a sass en mi sistema operativo pero para que pueda seguir interactuando dentro de mi proyecto de Gulp. De hecho, si tu accedes al sitio web de Gulp en gulpjs.com y accedes a la parte de plugins, aquí podrás encontrar muchos plugins que existen para poder integrar flujos de trabajo directamente con este aplicativo. Por ejemplo, si tú aquí buscas sass aquí te vas a poder encontrar gulp-sass que es el que estamos utilizando en este momento. Ahora, ya que lo tienes y que este ya se instaló --voy a escribir aquí clear para que se limpie la pantalla y tengamos un poco más de opciones--, ahora, lo único que tendremos que hacer es invocar desde arriba que vamos a ocupar gulp-sass y después de esto vamos a trabajar con un par de tareas. En este caso, es una tarea más sofisticada y vamos a hacer lo siguiente: va a ser gulp con una tarea que se va a llamar sass y, obviamente, esta es la función, esto es todo lo que se va a ejecutar cuando yo escriba Gulp espacio Sass y al hacerlo, simplemente voy a decir que me va a retornar algo. Primero, me va a buscar un archivo que se llama styles.scss. Ese archivo aún no existe, así que, ahora lo vamos a crear y este vamos a crearlo en la carpeta CSS vamos a ponerle su nombre y listo. ¿Qué estamos diciendo aquí ? que vamos a acceder a este archivo. Una vez que accedemos a ese archivo, se va a ejecutar el comando de sass este comando de sass es un comando interno que es el que acabamos de instalar y a la vez va a invocar a sass que está instalado en el sistema operativo pero eso lo va a hacer automáticamente. Y el resultado, como podemos tener aquí, donde dice gulp-dest, lo va a enviar directamente a app/CSS. Si nosotros vemos aquí, no tenemos absolutamente nada. Así que ahora, vamos a ejecutar este comando, --antes no olvides guardar tu archivo-- ejecutamos gulp sass y esto, obviamente, me va a ejecutar aquí, este archivo. Ya vimos cómo se creo. Obviamente, se creó vacío porque no tenemos nada. Vamos a probar directamente una clase. Vamos a suponer que tenemos una clase que se llame Box y vamos a ponerle un color que sea green, pero a su vez, aquí adentro existen etiquetas de H1 y estas etiquetas de H1 vamos a ponerle un font size de 50 pixeles. Así que, guardamos y vamos a ver una prueba inmediatamente. Voy a dividir mi pantalla en dos partes, así, en un lado estoy viendo lo que tengo con mi sass y en el otro lado estoy viendo lo que tengo en CSS. Ahorita no tengo absolutamente nada del lado de CSS, así que, voy a volver a levantar mi gulp sass, lo ejecuto, y una vez que lo ejecuto vemos cómo ya hizo todo el compilado de sass. Simple y sencillo. Ahora, si tú quieres integrar los comandos que existen directamente en Visual Studio Code, simplemente ejecuta comando P, vamos a escribir aquí un símbolo de mayor qué y escribamos la palabra task. Esto me va a ejecutar aquí varias opciones. Vamos a ejecutar la opción de run task y aquí vamos a ver que tenemos tareas ya predefinidas y elijamos la opción que dice sass. Así, vemos cómo se está ejecutando automáticamente y ya no necesito estar escribiendo más nada. Vamos a agregar, por ejemplo, un nuevo estilo para las etiquetas P, donde nosotros tengamos que este texto debe de estar alineado al centro. Guardamos. Vamos a dar Ctrl+P, mayor que task y ejecutar la tarea de sass. En esto ya se ejecutó y automáticamente ya me generó todos los estilos. Así, entonces, ya tenemos flujos de trabajo y procesos automatizados utilizando Gulp.