Con el auge de un servidor como NodeJS se ha propiciado la aparición de diversas herramientas que son de obligado uso para los especialistas en el Front-End. Estas herramientas que están 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. ¿El motivo? Nuestro IDE favorito, Visual Studio en la versión 2015, ya soporta de forma nativa estas herramientas (Bower,Grunt o Gulp) y como una extensión más el uso de estas herramientas de FrontEnd. Esto hace que una de las extensiones más utilizadas de Visual Studio en la nueva versión carezca de sentido.
Para los desarrolladores de SharePoint la nueva versión de Visual Studio no tiene mejoras sustanciales (salvo el uso de estas herramientas de FrontEnd) y en los que no tiene versión de extensiones indispensables como son las CKS Dev. Visual Studio 2013 es la opción más estable y más adecuada para los desarrollos OnPremise (mientras no salga la nueva versión de SharePoint 2016 y el SDK esté integrado con el IDE). En este artículo, vamos a ver como poder utilizar estas herramientas en Visual Studio 2013.
¿Qué es Bower y qué es Grunt?
Antes de empezar a ver cómo utilizar estas herramientas, es casi obligatorio una pequeña introducción a ellas.
Bower
Podemos decir que es un gestor de paquetes de las librerías JavaScript, algo similar a Nuget, pero con la ventaja de que se puede utilizar en todas las plataformas. A día de hoy, no hace nada que no haga Nuget, pero en un entorno en el que cada vez se quieren unir a más desarrolladores, Microsoft ha optado por adoptar las herramientas más utilizadas por los FrontEnd.
Grunt
Es un corredor o ejecutor de tareas Open Source para Javascript. En Grunt podemos ejecutar casi cualquier tarea que puedas definir de manera programada, incluso gran parte de las tareas comunes conforman ahora la comunidad de plugins de grunt, entre ellos podrás encontrar minificadores y compresores de código, convertidores de un lenguaje a otro (como SASS a CSS), ejecución de pruebas, validadores, rutinas de conexión a servidores, instalación de dependencias especiales, y mucho más. Es 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ándares de la web con el menor esfuerzo posible.
Requisitos Previos
Para poder utilizar Grunt o Bower dentro de Visual Studio, en primer lugar tenemos que tener instalado Git. 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á dentro del Path de Windows.
En segundo lugar, instalaremos NodeJS. Para quien no conozca nada sobe NodeJS una definición breve es la que nos ofrece la Wikipedia:
Es un entorno en tiempo de ejecución multiplataforma, de código abierto, para la capa del servidor (pero no limitándose a ello) basado en el lenguaje de programación EcmaScript
Una vez instalado NodeJS, abrimos la consola de NodeJS e instalaremos Bower y Grunt para ello pondremos las siguientes instrucciones:
npm install -g grunt-cli npm install -g bower
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ón sea de forma global.
Instalaremos las siguientes extensiones de Visual Studio:
Para poder utilizar Bower
Creamos un fichero bower.json dentro de la raiz de la solución, como por ejemplo este:
{
"name": "Intranet Encamina",
"private": true,
"dependencies": {
"bootstrap": "3.0.0",
"bootstrap-touch-carousel": "0.8.0",
"hammer.js": "2.0.4",
"jquery": "2.1.4",
"jquery-validation": "1.11.1",
"jquery-validation-unobtrusive": "3.2.2"
}
}
Lo que indica este fichero Json es similar a los packages de Nuget. Se indica el nombre de paquete que se va a utilizar y la versión de la misma. Ahora bien para poder ejecutarlo desde dentro de Visual Studio será necesario pulsar botón derecho sobre este fichero y visualizaremos una imagen como la siguiente:
Cómo utilizar Grunt
Para que funcione Grunt es necesario dos archivos: package.json y gruntfile.js. El archivo package.json tiene los paquete npm necesarios para poder utilizar grunt, y dentro del fichero GruntFile.js indicaremos todas las tareas que vamos a utilizar dentro de nuestro proyecto, como por ejemplo que se compruebe que la sintaxis JavaScript sea correcta, minificar los css, js, etc. Cabe mencionar que Grunt solamente es un paquete dentro de Node y que se complementa con otros paquetes como Grunt-Watch, etc..
Para partir de unos ficheros mínimos podemos optar por utilizar los existentes en el siguiente proyecto de Git. Para ello, podemos utilizar esta instrucción:
git clone --progress -v "https://github.com/gruntjs/grunt-init-gruntfile.git" "%USERPROFILE%.grunt-initgrunt-init-gruntfile"
A continuación dentro de la carpeta donde tenemos el proyecto ejecutamos la siguiente instrucción:
grunt-init grunt-init-gruntfile
Con esto ya disponemos de un fichero package.json y gruntfile dentro de nuestro proyecto. A continuación se agrega a nuestra proyecto de Visual Studio.
A continuación, de la misma forma que hemos realizado con bower, seleccionamos el fichero package.json pulsamos botón derecho y tendremos una opción para poder instalar los paquetes NPM necesarios dentro de nuestra aplicación.
Ahora queda la forma en la que tenemos que configurar los procesos que necesitamos. En este caso, vamos a validar que la sintaxis cumpla con sus necesidades:
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
¿Cómo Funciona?
En un lado indicamos los parámetros de configuración. Para ello, hay indicarlos dentro del método initConfig. A continuación indicamos la carga de los paquetes NPM que vamos a utilizar, y finalmente registraremos las tareas que vamos a utilizar. Una vez tengamso definidas las tareas, haremos uso del plugin instalado Task Runner en el que visualizaremos todas estas tareas e indicaremos cuando hacerlas. Por ejemplo, siempre que realice una compilación quiero validar el JavaScript y, en caso de fallo, que no compile de una forma similar a lo que se hace en otros lenguajes de Programación como C#.
Conclusión
Está claro que muchas veces es necesario utilizar las últimas herramientas (algo que hace muy apasionante nuestro día a día). Sin embargo, en muchas ocasiones no se pueden utilizar por diversos inconvenientes.
Una de las ventajas que nos proporciona Visual Studio es su posibilidad de extenderse. Como has podido observar en este ejemplo, utilizar alguna de las principales novedades en Visual Studio 2015 se puede realizar gracias a la Comunidad .NET en versiones anteriores. Esto propicia que no tengamos excusa para utilizar las mejores herramientas posibles dentro de nuestra día a día. Pongámoslo en práctica 😉
¡Suscríbete a nuestras RRSS!
