Nota: Este post ha sido realizado con versiones previas de ASP.NET 5 y de Visual Studio 2015, lo aquí escrito puede variar con versiones finales de la plataforma.
En la anterior entrada hemos visto como trabajar con las herramientas de cliente y wwwroot para hacer tareas habituales para los desarrolladores web. En este hicimos una introducción a Grunt y a algunos de sus plugins como grunt-contrib-less y grunt-contrib-uglify, pero nos quedo uno de los más habituales por mencionar. Bower, el cual podemos ver directamente si en vez de partir de un ejemplo vacío partimos de la plantilla Starter Web es un gestor de paquetes para la web. Seguramente al ver la primera parte de la definición piensa inmediatamente en Nuget, tal cual hacemos en el código .NET. En realidad el concepto es exáctamente el mismo, pero este es el índicado, en vez de Nuget, cuando nuestras dependencias sean web, js, css, etc.
Para hacer uso de Bower lo primero que haremos es instalarlo y para ello, como hemos hechos con otros módulos lo haremos retocando nuestro fichero package.json como se puede ver a continuación.
[snippet id=»168″]
Una vez instalamos Bower, agregamos el archivo de configuracion del mismo, que como con el caso de NPM ya tenemos como plantilla dentro de Visual Studio 2015.
Si se fija en la vista de solución, al agregar este fichero de configuración el árbol de dependencias no solamente nos enseña los diferentes modulos NPM que tenemos sino que también nos enseñará los diferentes paquetes descargados con Bower. Si en el anterior post vimos como el fichero de proyecto ignoraba el directorio “node_modules”, dónde los diferentes modilos de Node son descargados, también hay una exclusión del directorio donde serán descargados los paquetes de Bower.
[snippet id=»149″]
Para ver un ejemplo de uso de Bower, vamos a poner como dependencias jQuery a nuestro, proyecto.
[snippet id=»169″]
Bien, una vez hecho esto, si restauramos el paquete en su menu contextual, como con los modulos NPM, podemos ver como en el directorio bower_components tenemos una carpeta jquery con todo lo necesario de este paquete. Si nos fijamos, el exportsOverride lo que nos va a permitir especificar que queremos de cada paquete y donde lo queremos dejar, en nuestro caso la idea es algo tal cual: “Queremos llevar a una carpeta de nombre js los ficheros del paquete que empiezen por jquery y terminen en js, min.js o min.map”
Pero, ¿dónde y quien los lleva a esta carpeta js? Pues, otra vez entra en escena Grunt, en este caso el fichero Gruntfile.js donde podemos configurar una tarea para realizar el trabajo.
[snippet id=»170″]
Fíjese como se ha especificado el directorio raiz a usar en todos los exportsOverride con la propiedad TargetDir que apunta a nuestro wwwroot. Según esto, el contenido de nuestro wwwroot es el siguiente.
wwwroot/lib/js/jquery.js
wwwroot/lib/js/jquery.min.js
Bueno, hasta aqui terminamos la segunda entrada referida al trabajo con el cliente en la que hemos podido ver como funciona Bower, de una forma muy simple.
Posts Relacionados
ASP.NET 5 Trabajando con el cliente I
Saludos
Unai Zorrilla Castro