{"id":1910,"date":"2015-11-10T11:00:21","date_gmt":"2015-11-10T10:00:21","guid":{"rendered":"http:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/?p=1910"},"modified":"2015-11-10T10:31:11","modified_gmt":"2015-11-10T09:31:11","slug":"integrando-grunt-y-bower-en-visual-studio-2013","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/desarrollandosobresharepoint\/integrando-grunt-y-bower-en-visual-studio-2013\/","title":{"rendered":"Integrando Grunt y Bower en Visual Studio 2013"},"content":{"rendered":"

\"grunt-y-bower\"<\/a>Con el auge de un servidor como NodeJS se ha propiciado la aparici\u00f3n de diversas herramientas que son de obligado uso para los especialistas en el Front-End. Estas herramientas que est\u00e1n en boca de casi todo el mundo son Bower, Grunt o Gulp. La salida de Visual Studio 2015 propicia un cambio en el marco para los desarrolladores de .NET<\/strong>. \u00bfEl motivo? Nuestro IDE favorito, Visual Studio en la versi\u00f3n 2015, ya soporta de forma nativa estas herramientas (Bower,Grunt o Gulp) y como una extensi\u00f3n m\u00e1s el uso de estas herramientas de FrontEnd. Esto hace\u00a0que una de las extensiones m\u00e1s utilizadas de Visual Studio<\/a> en la nueva versi\u00f3n carezca de sentido.
\nPara los desarrolladores de SharePoint la nueva versi\u00f3n de Visual Studio no tiene mejoras sustanciales (salvo el uso de estas herramientas de FrontEnd) y en los que no tiene versi\u00f3n de extensiones indispensables como son las CKS Dev<\/a>. Visual Studio 2013 es la opci\u00f3n m\u00e1s estable y m\u00e1s adecuada para los desarrollos OnPremise<\/strong> (mientras no salga la nueva versi\u00f3n de SharePoint 2016 y el SDK est\u00e9 integrado con el IDE). En este art\u00edculo, vamos a ver como poder utilizar estas herramientas en Visual Studio 2013.<\/p>\n

\u00bfQu\u00e9 es Bower y qu\u00e9 es Grunt?<\/h2>\n

Antes de empezar a ver c\u00f3mo utilizar estas herramientas, es casi obligatorio una peque\u00f1a introducci\u00f3n a ellas.<\/p>\n

Bower<\/h3>\n

Podemos decir que es un gestor de paquetes de las librer\u00edas JavaScript, algo similar a Nuget, pero con la ventaja de que se puede utilizar en todas las plataformas. \u00a0A d\u00eda de hoy, no hace nada que no haga Nuget, pero en un entorno en el que cada vez se quieren unir a m\u00e1s desarrolladores, Microsoft ha optado por adoptar las herramientas m\u00e1s utilizadas por los FrontEnd.<\/p>\n

Grunt<\/h3>\n

Es un corredor o ejecutor de tareas Open Source\u00a0para Javascript. En\u00a0Grunt podemos\u00a0ejecutar casi cualquier tarea que puedas definir de manera programada, incluso gran parte de las tareas comunes conforman ahora la comunidad de plugins<\/a> de grunt, entre ellos podr\u00e1s encontrar minificadores y compresores de c\u00f3digo, convertidores de un lenguaje a otro (como SASS a CSS), ejecuci\u00f3n de pruebas, validadores, rutinas de conexi\u00f3n a servidores, instalaci\u00f3n de dependencias especiales, y mucho m\u00e1s.\u00a0Es una herramienta muy utilizada en el desarrollo de aplicaciones web, ya que existen muchas tareas predefinidas y repetitivas que un desarrollador debe llevar a cabo para lograr optimizar el software y convertirlo en una pieza de calidad que siga los est\u00e1ndares de la web con el menor esfuerzo posible.<\/p>\n

Requisitos Previos<\/h2>\n

Para poder utilizar Grunt o Bower dentro de Visual Studio, en primer lugar tenemos que tener instalado Git<\/a>.\u00a0<\/strong>Es necesario Git porque para Bower tiene una dependencia y sino no se puede utilizar. Una vez instalado hay que asegurarse que la ruta de Git est\u00e1 dentro del Path de Windows.<\/p>\n

En segundo lugar, instalaremos NodeJS<\/a>. Para quien no conozca nada sobe NodeJS \u00a0una definici\u00f3n breve es la que nos ofrece la Wikipedia<\/a>:<\/p>\n

Es un entorno en tiempo de ejecuci\u00f3n multiplataforma, de c\u00f3digo abierto, para la capa del servidor (pero no limit\u00e1ndose a ello) basado en el lenguaje de programaci\u00f3n EcmaScript<\/p><\/blockquote>\n

Una vez instalado NodeJS, abrimos la consola de NodeJS e instalaremos Bower y Grunt para ello pondremos las siguientes instrucciones:<\/p>\n

\r\nnpm install -g grunt-cli\r\nnpm install -g bower\r\n<\/pre>\n
NPM es el gestor de instalar paquetes dentro de NodeJS y lo que hacemos con estas instrucciones es instalarnos estos paquetes dentro de NodeJS y poder y utilizarlo. Por un lado el parametro -g indica que la instalaci\u00f3n sea de forma global.<\/p>\n
Instalaremos las siguientes extensiones de Visual Studio:<\/p>\n