Utilizando Gulp, grunt, bower y NPM en Visual Studio


El desarrollo frontend está viviendo una transformación hacia un desarrollo más complejo.
Mediante preprocesadores cómo LESS o SASS que nos sirven para poder utilizar algoritmos de programación, variables y demás, para posteriormente generar nuestros CSS.
Utilizar paquetes y librerías externas para JavaScript, minificar y ofuscar el código, que es una técnica muy utilizada en el desarrollo frontend para reducir el peso de nuestras webs y hacer el código ininteligible.
Hasta utilizar lenguajes cómo TypeScript un lenguaje Open source creado por Microsoft que añade una estructura realmente orientada a objetos para poder programar y compilar finalmente a JavaScript.

A la vez que todo esto, han nacido herramientas y plataformas que nos facilitan esta labor, de las cuales podemos destacar Grunt y Gulp para gestionar nuestros proyectos o Bower y NPM para gestionar los paquetes de los proyectos.

Utilizando una serie de extensiones podemos integrar estas herramientas en Visual Studio que  nos facilitarán nuestro día a día en el desarrollo de webs o apps.

Instalando las extensiones

Necesitamos instalar tres extensiones:

  • Task Runner Explorer: Nos aporta un nuevo panel con el que podemos ejecutar las diferentes tareas de Gulp o Grunt.

image 

  • Grunt Launcher: Con esta extensión podemos ejecutar tareas de Grunt o Gulp haciendo click derecho en el fichero de configuración, mediante un panel desplegable o actualizar nuestros paquetes.

image

  • Package Intellisense: Finalmente lo que obtenemos instalando esta aplicación es un una búsqueda online de los paquetes de npm y bower, mientras escribimos en el fichero de configuración.

image

 

Utilizando Bower y NPM en tu proyecto

Creamos los dos archivos JSON de configuración, correspondientes a cada plataforma y escribimos la configuración necesaria.

Recuerda que la extensión Package Intellisense nos va a estar ayudando, ya sea completando el nombre, sugiriendo extensiones, dando información sobre la extensión, incluso actualizarla o borrarla mediante los Smart Tags.

 

También podemos utilizar una extensión llamada Node.js Tools For Visual Studio  con la que podemos trabajar con Node.js totalmente integrado en Visual Studio, para el cual ya hizo mi compañero Luis un artículo donde tenéis toda la información.

 

image

 

Trabajando con Task Runner (Gulp o Grunt)

Una vez tenemos nuestro fichero de tareas, podemos ejecutar cualquiera de ellas (incluso un watcher) desde el panel de Task Runner.

Visual Studio detectará todas las tareas de Gulp o Grunt que tengamos en nuestro archivo, nos las añadirá al Task Runner y al menú desplegable que aparece al hacer clic en cada uno de los archivos.

Otra característica del panel es que vamos a tener la consola integrada, para poder ver con detalle desde el mismo Visual Studio, cómo se están ejecutando las tareas y si están teniendo algún tipo de problema.

 

Conclusión


Si eres desarrollador JavaScript o trabajas en frontend, puedes utilizar toda la potencia de Visual Studio en tus proyectos y además integraras herramientas más utilizadas en desarrollo frontend en el propio Visual Studio.

 


Quique Fernández

Technical Evangelist Intern

@CKGrafico

Comments (3)

  1. Alfredo says:

    Vientos, buen articulo, recien empiezo con las SPA con MEAN. Es bueno saber que se pueden utilizar estas herramientas en VS.

  2. Junior says:

    Muchas gracias por la documentación y/o explicación. Me parece una muy buena solución incluyendo visual studio

  3. noztum says:

    si en el equipo tenemos node 64bits y cargamos dependencias de npm, cuando estemos en visual stutio las veriones nos daran problema debido a que el grunt por detrás esta a 32 y los repositorios no coincidirán con los instalados, por lo cual grunt de visual studio dará error y seguirá siendo necesario usarlo a través del cmd.

Skip to main content