ASP.NET 5 Trabajando con el cliente I

Nota: Este post ha sido realizado con versiones previas de ASP.NET 5 y de Visual Studio 2015, lo aquí escrito puede variar con la version final de la plataforma.

Sin duda alguna,  son muchos los cambios que la nueva versión de MVC y realmente de nuestro IDE de desarrollo favorito traen para la siguiente versión. Gracias al cambio a un modelo Open Source podemos tener de forma mucho más temprana información acerca de todas las cosas en las que están trabajando, por supuesto, a veces también tenemos los problemas derivados de su dia a dia en unas versiones tan poco estables.  De entre todas las novedades que tanto la nueva version de MVC como la plataforma nos traen sin duda alguna la relativa a la gestión de los diferentes assets de cliente que podemos tener en nuestros proyectos ASP.NET 5 es una de las que más van a gustar a los desarrolladores .NET. A lo largo de este post trataremos de ver todas estas novedades instentando explicar todas y cada una de ellas de una forma lo más sencilla posible.

WWWRoot

Hasta ahora, cuando trabajábamos con un proyecto web, en nuestra solucion de Visual Studio no teníamos realmente una idea de que elementos formaban parte del despliegue de nuestra aplicación y por supuesto, tampoco teníamos una forma cómoda, siempre están los eventos de compilación, de interactuar con los mismos para realizar cualquier operacion sobre ellos. En la imagen de la derecha se puede observar la vista de una solución de MVC por defecto, donde no hay una visión clara de los elementos que formarán parte de nuestro despliegue.

old

En la nueva versión de ASP.NET 5 y MVC 6 se ha tratado de mejorar este hecho de una manera sustancial y para ello se ha introducido la vista de nuestra “Output” mediante una carpeta especial en la que podremos ver la estructura de nuestra salida  de proyecto. Por defecto, esta carpeta se llama wwwroot, aunque como veremos más adelante, por supuesto este nombre puede modificarse, si por alguna razón extrana este no le gustara. En la siguiente imagen puede verse un proyecto vacío de ASP.NET MVC 6 y la presencia de esta carpeta en el. En el momento en el que dentro de este directorio se vayan incorporando assets como imagenes, css, javascript etc esta nos presentará una vista de directorio que nos permitirá de un vistazo distinguir los elementos propios de la solución como ficheros de configuración, elementos de código, plantillas, etc de los elementos de salida y despliegue de nuestro proyecto.

wwwroot

Como comentamos en el párrafo anterior, este nombre de wwwroot no es un nombre impuesto y por supuesto, si entendemos que es necesario, el mismo puede ser modificado.

[snippet id=”149″]

Para modificar este solamente tendriamos que crear un nuevo directorio en el proyecto con el nombre deseado, por ejemplo, Deployment y modificar nuestro elemento webroot con este nombre, con lo que la vista de la solución quedaría como se puede observar. nota: quizás si ha probado esto usted mismo haya notado que a Visual Studio le ha costado un poco refrescar este cambio, esperemos que en la version final esto sea menos viscoso de lo que es ahora mismo. image[3]

Grunt

Sin duda alguna, otro de los elementos importantes incorporados a la plataforma es el uso de herramientas habituales por otros muchos desarrolladores web como por ejemplo son Grunt, Gulp, Bower etc. En este y en los siguientes puntos trataremos de cubrir. Grunt, tal cual puede ver en su home, es un sistema de tareas escrito en javascript que actualmente tiene una inmensa cantidad de plugins para automatizar muchas de las tareas que los desarrolladores web hacemos continuamente. En este enlace puede ver algunos de los muchos plugins que actualmente están disponibles. Si seleccionamos la plantilla por defecto de ASP.NET 5 Starter Web veremos como todo lo necesario para empezar a trabajar con Grunt lo tenemos hecho, sin embarlo, nosotros lo haremos desde un proyecto vacío porque nos permitirá ver más facilmente los diferentes elementos necesarios y que es cada cosa. 1 – Lo primero que haremos es incorporar un fichero de configuracion de Node Package Manager, que nos permitirá incorporar las dependencias de modulos de Node que necesitamos para hacer funcionar tanto Grunt como otras herramientas que veremos a continuacion.Una vez incorporado, nuestra vista de solución nos muestra estas dependencias de una forma visual con un nuevo “directorio especial” llamado “Dependencies”.

  • npm

dependenciesnpm   2 – Ahora, abriremos nuestro fichero packages.json, para establecer una dependencia con Grunt, fíjese como Visual Studio nos ofrece Intellisense para realizar esta tarea.

[snippet id=”156″]

3 – Instalaremos estas dependencias desde el menú contextual de nuestra carpeta NPM o bien dependencia por dependencia, en nuestro caso solamente tenemos una por ahora. restorepackages 4 – Con esto, ya tenemos instalado el módulo de Grunt dentro de nuestra solución, fíjese como en el explorador de ficheros tendrá una nueva carpeta llamada “node_modules” y que en su interior contendrá los diferentes módulos que se instalen. Si vuelve la vista atrás y se fija otra vez en nuestro fichero project.json verá como en la propiedad packExclude contiene precisiamente una exclusión  a este directorio recién creado. 5 – El último paso, ahora que tenemos instalado Grunt, es agregar su fichero de configuración donde podremos ir dando de alta el conjunto de tareas que querramos que realice. Visual Studio, ya incorpora una plantilla para un fichero de configuración de Grunt, por lo tanto, lo agregaremos sin más. El contenido de este fichero Gruntfile.js es el siguiente:

[snippet id=”157″]

Ya tenemos instalado Grunt, ¿que hacemos ahora? Aunque el ejemplo sea un poco prototípico la verdad es que nos vale muy bien para cubrir un ejemplo de que cosas podemos hacer. Uno de los plugins más conocidos de Grunt es grunt-contrib-less gracias al cual podemos transformar nuestros ficheros less en archivos css. En el enlace anterior puede ver la cantidad de parámetros y configuración que podemos hacer para esta tarea, nosotros nos ceñiremos a lo más simple, nuestro objetivo es enseñar como incluir tareas en grunt no las particularidades de cada una de ellas. Empezaremos por incluir este plugin, que como tal es un modulo de Node y por lo tanto, al igual que hicimos anteriormente modificaremos nuestro package.json para incluir el mismo.

[snippet id=”158″]

Una vez que ya lo hemos incluído y hemos restaurado el modulo igual que anteriormente es la hora ya de tocar nuestro fichero de configuración de grunt para que realiza las tareas que queremos, para ello abrimos de nuevo nuestro Gruntfile.js y lo dejaremos tal cual sigue:

[snippet id=”159″]

Tal y como se ha dicho, se recomienda visitar la página de grunt-contrib –less para ver las muchas, variadas y potentes opciones que este plugin nos permite, puesto que esto se escapa del objetivo de este posts. Bien, ya está casi todo, ahora solamente tenemos que ver como ejecutar estas tareas, para ello, disponemos en Visual Studio de una nueva ventan, llamada Task Explorer, en el menú de herramientas. taskexplorer Esta nueva ventana, no solamente nos permitirá ejecutar las diferentes tareas que tengamos en nuestro fichero Gruntfile.js sino que además nos permitirá enlazarlas a diferentes eventos de compilación para por ejemplo ejecutarlas en función del paso en el que estemos. Pruebe en este momento a ejecutar la tarea por defecto desde su menú contextual y verá como nuestro directorio wwwrooot contiene ahora una archivo site.css dentro de una carpeta css como establecimos en nuestra tarea. sitecss ¿Sencillo verdad? Pues bien, ahora que ya hemos cubierto el escenario más simple, vamos a ver como utilizar esto mismo para realizar ciertos trabajos con nuestros ficheros javascript. Para ello, vamos a imaginarnos que tenemos un archivo javascript app.js como se ve a continuación:

[snippet id=”160″]

Nos interesa que uno de los pasos de nuestras tareas sea minificar por ejemplo estos archivos javascript para que el peso final sea menor que el original, o por ejemplo crear los source maps de los mismos. Para ello en Grunt tenemos el plugin grunt-contrib-uglify que al igual que el de less contiene una cantidad ingente de parametros y opciones de configuración. En nuestro caso tendremos lo siguiente:

[snippet id=”161″]

Gracias a esta tarea, la salida, dentro de nuestro wwwroot será un archivo app.js que tendrá el siguiente aspecto:

[snippet id=”162″]

Bueno, creo que por ahora es suficiente ¿no? En la segunda parte de este posts veremos como trabajar con Bower, otro de los modulos de Node que nos servirán de mucha ayuda en nuestro dia a dia.   Saludos Unai Zorrilla Castro

4 comentarios en “ASP.NET 5 Trabajando con el cliente I”

  1. Hola Unai,
    tengo una estructura de proyecto similar a la que planteas (estoy trabajando con el VS2015 RC), y me surge una duda respecto a como hacer debuggin con las DevTools de Chrome o cualquier navegador.
    El caso es que tengo una estructura de javascript fuera del wwwroot, y una tarea en grunt que lo minifica todo en un fichero app.min.js dentro del wwwroot. En la tarea de grunt establezco el sourcemap para poder hacer el debugeo en el navegador. Cuando ejecuto y exploro en las Devtools de Chrome veo mi estructura de javascripts, pero los ficheros estan vacios. ¿Pueden estar fuera del wwwroot, o hay que hacer una copia fisica para poder hacer debug?
    Saludos!

  2. Hola Unai,
    tengo una estructura de proyecto similar a la que planteas (estoy trabajando con el VS2015 RC), y me surge una duda respecto a como hacer debuggin con las DevTools de Chrome o cualquier navegador.
    El caso es que tengo una estructura de javascript fuera del wwwroot, y una tarea en grunt que lo minifica todo en un fichero app.min.js dentro del wwwroot. En la tarea de grunt establezco el sourcemap para poder hacer el debugeo en el navegador. Cuando ejecuto y exploro en las Devtools de Chrome veo mi estructura de javascripts, pero los ficheros estan vacios. ¿Pueden estar fuera del wwwroot, o hay que hacer una copia fisica para poder hacer debug?
    Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *