El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrolladores: Trucos semanales

Usa Visual Studio Code para ejecutar tareas de 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.
03:47
  Añadir a marcadores

Transcripción

La automatización de tareas es una actividad muy común en el mundo del desarrollo web, pues nos ahorra tiempo y dolores de cabeza con tareas tediosas como la minificación de código, la compilación de código sass o incluso la recarga del navegador donde estemos probando nuestro código. Gulp es una de esas herramientas que nos sirve para crear flujos automatizados de trabajo e, incluso, ejecutar algunos comandos existentes en nuestro sistema operativo. De hecho, podemos asignar a cada flujo un nombre con el cual podemos invocar alguna tarea posteriormente. Obviamente, todo esto se hace a nivel de línea de comandos pero algunos editores de código, como Visual Studio Code, nos permite invocar Gulp o alguna de sus tareas directamente desde su interfaz, o incluso usando un atajo en el teclado que nos permita compilar o invocar determinada tarea. Si aprendes cómo integrar este proceso a tu editor de texto estarás ahorrando segundos valiosos sin tener que estar cambiándote de ventana una y otra vez. Solo será necesaria la configuración inicial muy simple, y ¡voilá! a indicar tareas desde tu editor. Veamos cómo se hace este trabajo. Una tarea muy común, en casi todos los proyectos, es trabajar con archivos de configuración de Gulp. En este caso, tenemos un proyecto de Ionic Framework en el cual tenemos una configuración de Gulp bastante robusta donde existen distintas áreas como sass, watch, install, git-check, etc. Cuando trabajamos con Visual Studio Code, podemos ejecutar dichas tareas de una manera sencilla simplemente con el juego de teclas Cmd + Shift + B esto va a invocar la gestión de tareas que utiliza Visual Studio Code, pero necesita un archivo de configuración, si no lo tiene, nos va a salir este mensaje que dice que no hay ninguna tarea marcada, que se tiene que configurar. Pulsamos el botón Configure Buid Task y cuando lo hacemos, solamente tenemos que elegir cuál es el tipo de configurador que nosotros vamos a necesitar. En este caso, seleccionamos la opción Gulp. Una vez que ya lo tenemos, se genera este archivo con dichas opciones y, entonces, puedo yo volver a ejecutar Comando + Shift + B y esto va a levantar todas las opciones que trabaja Gulp y lo va a ejecutar de manera automática, es decir, no necesito yo ir a la línea de comandos y ejecutar Gulp y el comando que yo quiero ejecutar por lo cual, lo puedo hacer a través de un shortcut en mi editor de texto, y esto va a hacer que se muestre sin ningún problema mi archivo. Ahora, como también tengo disponibles varias tareas, también puedo ejecutarlas directamente desde aquí, ¿cómo? Podemos levantar la paleta de comandos y en la paleta de comandos vamos a escribir un símbolo de mayor que y escribamos la palabra task. Aquí tenemos varias opciones. Si tú ves, aquí se encuentra también la opción que acabábamos de trabajar que significa Run Build Task. Nosotros elegimos ahora la opción que dice Run Task y cuando la elegimos nos aparecen aquí varias opciones Default, git-check, install, sass y watch. Si tú ves en el archivo que se ve al fondo nosotros tenemos aquí las tareas default sass, watch e install, son las que alcanzamos a ver en este archivo de configuración. Entonces aquí, simplemente, vamos a elegir alguna por ejemplo, vamos a elegir la tarea de sass que esto es que compile todos los archivos de sass hacia css. Cuando la ejecutamos termina y funciona sin ningún problema, con lo cual entonces estamos trabajando con puros comandos de nuestro editor de código sin necesidad de estar ejecutando un nuevo comando directamente nosotros, lo cual nos facilita todo el trabajo porque estamos trabajando con puros shortcuts del teclado y nos estamos ahorrando bastante tiempo.