Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ASP.NET

Integración de un proceso de compilación JS en MSBuild en Visual Studio 2012 Express

by
Read Time:27 minsLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

He estado trabajando con ASP y ASP.NET durante aproximadamente diez años, comenzando con ASP clásico y estableciendo en .NET 2.0 como mi favorito. La resolución de mi año nuevo (2013) fue actualizar mi trabajo .NET a .NET 4.0 con Visual Studio 2012 Express y familiarizarme con MSBuild, para poder concatenar y minimizar mis archivos JavaScript como parte del proceso de compilación normal. de un proyecto .NET, en Visual Studio.

Mi primer amor es usar Ant en NetBeans con una plataforma PHP o JSP para este tipo de trabajo, pero el sitio web principal de mi compañía se ejecuta en una plataforma .NET y es hora de actualizarlo, así que decidí atacar de nuevo. a un estudio serio sobre la creación de un proceso de construcción completamente integrado usando MSBuild.

Este tutorial te mostrará cómo editar tu archivo de proyecto de Visual Studio 2012 Express para incluir tu propio archivo de compilación independiente que llevará a cabo el proceso ahora muy conocido de concatenar y minimizar un conjunto de módulos de JavaScript en un archivo listo para su implementación.


Requisitos de Software

Quería un proyecto no trivial para demostrar este proceso, porque encuentro que el diablo está en los detalles. A menudo he seguido fielmente un tutorial o una introducción demasiado simple a un tema desconocido, y luego descubrí que el tutorial no me preparó para cuando quieres hacer algo aunque sea un poco difícil. Por lo tanto, en este tutorial estaremos intentando casarnos con Knockout.js y jQuery UI. También utilizaremos un archivo JSON con una jerarquía de datos para definir un menú. Usaremos una plantilla de Knockout.js con un enlace foreach que recorre los datos JSON para emitir una jerarquía de elementos ul para actuar como el marcado HTML para una barra de menú compatible con jQuery UI.

Lamentablemente, la barra de menú aún no está disponible (versiones 1.9 o 1.10) incluida con la interfaz de usuario jQuery, por lo que necesitas descargar los archivos de la barra de menús de la rama de la barra de menús de la interfaz de usuario jQuery. También necesitas el compresor YUI para minimizar los archivos de origen de JavaScript. Para este tutorial, necesitarás tener instalado Visual Studio 2012 Express para Web. También necesitarás descargar:

Si no estás acostumbrado a JSON, es una buena idea visitar el sitio web JSON.


¿Por qué MSBuild y Not NAnt?

Si leíste mi último tutorial Usando Ant para construir una biblioteca de JavaScript, quizás te estés preguntando por qué este tutorial no es sobre NAnt. Bueno, con mi nueva y brillante instalación de Visual Studio 2012 Express, me gustaría tratar de poner mi desarrollo bajo un mismo techo. Mi IDE favorito de C# absoluto para el desarrollo de Assembly, durante muchos años, fue SharpDevelop. Hace algunos años se mudaron de NAnt a MSBuild para la versión tres de SharpDevelop. Por fin es hora de seguir mi ejemplo.

Ya no utilizamos NAnt en nuestro proceso de compilación, cambiamos por completo a MSBuild / CruiseControl.NET. Y no vemos la capacidad de depender del sistema operativo dominante como un paso atrás: ayuda a reducir el número de partes móviles, las diferentes configuraciones, las diferentes configuraciones de los usuarios.

#D3.0 - Eliminando NAnt Support: ¿Por qué?

Justificación: ¿Por qué integrar la compilación de JavaScript en la compilación .NET?

Durante años, para mi desarrollo .NET, he trabajado con tres IDE diferentes simultáneamente:

  1. Desarrollar en Sharp para C#, pero también cuento con JavaScript y CSS concatenando y minimizando el proceso de construcción en ese entorno con una copia especialmente instalada de NAnt.
  2. Visual Studio (2005 etc) para las páginas maestras, páginas de contenido.
  3. Un editor externo como Aptana para manejar el desarrollo de JavaScript.

El uso de tres IDE de este tipo fue agotador (y, sorprendentemente, sobrecargo para mi CPU y RAM), por lo que la resolución de otro nuevo año es reunir todo en Visual Studio. De ahí la necesidad de comprender cómo integrar mi proceso de compilación de JavaScript en la compilación general del proyecto.

Uno de los principales atractivos de MSBuild para mí (en plataformas Windows) es que viene como parte de .NET. Eso significa que cualquier máquina Windows que esté actualizada con Windows Update tendrá MSBuild disponible.

Comparación de NAnt y MSBuild en StackOverflow.

Configuración de tu entorno

Abre un nuevo proyecto en Visual Studio 2012 Express. Lo he llamado NetTutsMSBuildJs y lo he creado dentro de mi carpeta Tuts+ aquí: C:\NetTuts\MSBuildJs.

New Project Dialog BoxNew Project Dialog BoxNew Project Dialog Box

Como se puede ver en la captura de pantalla, he creado una serie de carpetas de la siguiente manera:

js_folders
Carpeta de contenidos
css Versiones de lanzamiento de producción de archivos jQuery UI CSS. Para este tutorial, estamos usando el tema smoothness.
debug Varias versiones de la página de formulario web Default.aspx para propósitos de depuración.
debug-js Tres carpetas: concat, min y src.
js Versiones de lanzamiento de producción de jQuery, jQuery UI y Knockout.
jsbuild Un archivo de compilación XML con todas las tareas necesarias para la compilación de JavaScript y una copia del compresor YUI.
json El archivo JSON clave es menubar-data.json que tiene los datos necesarios para construir la barra de menú. También los archivos JSON utilizados para rellenar la página de acuerdo con las opciones de menú del usuario.

Observa que algunas de las carpetas están en gris. Esto es porque los he excluido del proyecto. Puedes cambiar esta configuración desde el menú contextual:

exclude_from_projectexclude_from_projectexclude_from_project

Es fácil eliminar y crear directorios durante el proceso de construcción, pero no hay manera de incluir o excluir elementos del proyecto mediante programación. Las carpetas concat y min en debug-js son desechables, generadas automáticamente por el proceso de compilación a partir de lo que haya creado en la carpeta src, por lo que es apropiado excluirlas del proyecto. Ten en cuenta que no puedes excluir la carpeta de depuración debug del proyecto porque contiene páginas de formulario web .NET que tienen archivos de código subyacente. Si excluyes la carpeta, las páginas del formulario web arrojan errores que indican que no se pueden encontrar las clases definidas en los archivos de código subyacente.

show_all_files

Puedes alternar si estos objetos excluidos deben mostrarse yendo al icono Mostrar todos los archivos en la parte superior del Explorador de soluciones y haciendo clic. Siempre quiero poder verlos.

Hay una pieza clave más de configuración que necesitamos para este proyecto. IIS y el IIS Express incorporado no incluyen un tipo de mime JSON de forma predeterminada, y usaremos los archivos JSON de manera extensiva para entregar contenido, por lo que debemos agregarlo al archivo Web.config. Dentro del elemento configuration, agrega un elemento system.webServer como este:


El proyecto JavaScript: Desarrollando una barra de menú usando JSON, Knockout y jQuery UI

El enfoque de este tutorial es cómo construir un proyecto de JavaScript dentro de un proyecto .NET, pero no podemos ir más lejos hasta que tengamos algo que construir, así que ahora permítanme explicarles el proyecto un poco ambicioso que tengo en mente.

Aquí hay un diagrama de componentes UML que muestra todas las piezas que necesitarás el proyecto. Ten en cuenta que este es un diagrama de componentes completo desde el punto de vista del desarrollador que muestra todo tipo de artefactos desechables que solo son importantes, por ejemplo, para la depuración. No es un diagrama de componentes de solo los artefactos clave necesarios para el sistema objetivo.

Component DiagramComponent DiagramComponent Diagram

Un diagrama de componentes define la composición de componentes y artefactos en el sistema.
IBM: Diagramas de componentes

En UML 2.0, "component" se usa para describir una idea más abstracta: unidades encapsuladas autónomas; "artifact" se usa para describir lo que estoy mostrando en este diagrama: archivos y bibliotecas. Es un diagrama ideal para mostrar cómo los distintos archivos dependen unos de otros. Por ejemplo, todas las páginas de formulario web dependen de la página maestra principal. El archivo js.build no funcionará si el archivo jar del compresor no está presente. El archivo de proyecto y el archivo js.build son, de manera molesta, mutuamente dependientes. Si el archivo js.build no está presente, el proyecto no se cargará; js.build no puede ejecutarse solo, las tareas definidas allí son activadas por el evento AfterBuild en la compilación general del proyecto.

Para este tutorial, quiero mostrar una barra de menú horizontal usando la rama de la barra de menús de jQuery UI. Para hacer eso, tengo un archivo JSON con los datos jerárquicos para el menú y una plantilla Knockout.js que recorre estos datos para representar
Marcado HTML que necesita la barra de menú jQuery. He añadido una función callback renderMenu que se activa mediante el evento afterRender en la plantilla Knockout. renderMenu simplemente hace una llamada a la barra de menú para finalmente mostrar menubar con todas las características brillantes de jQuery UI.


Paso 1: Los archivos de lanzamiento a producción

CSS

Descarga el paquete completo desde la interfaz de usuario de jQuery, incluido el tema de tu elección. Después de descomprimir tu descarga, ve a la carpeta llamada css, donde encontrarás una carpeta con el nombre del tema elegido. En mi caso, he elegido 'smoothness'. Abre esa carpeta y deberías ver los archivos que necesitas:

jquery_ui_cssjquery_ui_cssjquery_ui_css

Copia toda la carpeta de temas (smoothness) y pégala en tu carpeta css en el proyecto. Vuelve a Visual Studio, haz clic en el icono de actualización en la parte superior del Explorador de soluciones y la carpeta smoothness deberías aparecer en la carpeta css. Debes incluir la carpeta en el proyecto también.

Además de jQuery UI y un tema específico, también necesitas el pequeño archivo CSS específicamente para la barra de menú. Después de descargar el proyecto de barra de menús de github, profundiza en el archivo jquery.ui.menubar.css siguiendo esta ruta: \jquery-ui-menubar\themes\base\jquery.ui.menubar.css. Copia eso a la carpeta css de tu proyecto.

JavaScript

Descarga versiones actualizadas de las versiones de producción de jQuery, jQuery UI y Knockout. Estoy usando 1.8.2 para jQuery, 1.9.2 para jQuery UI y 2.1.0 para Knockout. Cópialos a la carpeta js en tu proyecto.

También necesitarás la última versión, sin comprimir, de jquery.ui.menubar.js, descargado de la rama de la barra de menú del proyecto jQuery UI. Copia eso a la carpeta debug-js\src en tu proyecto.

La página principal maestra

Estamos creando varias versiones de la misma página para ayudar a depurar y probar nuestro JavaScript. La página maestra, por supuesto, puede ayudar a evitar la duplicación de código. Llama a esta página maestra Main.Master.

add_new_master_pageadd_new_master_pageadd_new_master_page

Deja el elemento del título en blanco (definiremos el título para cada página que use esta maestra) y vincularemos a todas las hojas de estilo que necesitamos para jQuery UI y la barra de menú:

Agrega un ContentPlaceHolder justo antes del final del body donde cada página se vinculará con los archivos JavaScript relevantes


Paso 2: La definición JSON de los datos necesarios para la barra de menú

Aquí está el objeto JSON que define una barra de menú que podríamos usar para un sitio web de instructores de inglés. Crea un archivo JSON llamado menubar-data.json en la carpeta json y rellénalo con el siguiente JSON.

Los nodos de nivel superior no tienen propiedades de URL definidas, por lo que al hacer clic, solo mostrarán los elementos del submenú. Los sub-menús contienen nodos con la propiedad URL definida. Cuando haces clic en uno de estos nodos, el sistema recuperará los datos JSON del archivo en esa URL.

Cada archivo JSON vinculado a, en la barra de menú, contiene algo de contenido en una estructura simple que define un encabezado y un texto:


Paso 3: La plantilla de eliminación para la barra de menú

Definimos esto en Main.Master. No hay una forma obvia de minimizarlo o mejorarlo para su implementación, por lo que quiero volver a usarlo con cada versión de las páginas que enlazan con la página maestra.

Quería tener solo una plantilla Knockout para representar el marcado HTML (un conjunto de elementos ul anidados) para la barra de menú, pero no es sorprendente que el evento afterRender asociado con el enlace foreach se active con cada ciclo, no al final de todo el proceso de renderizado . Por lo tanto, necesitaba crear un observableArray con solo un elemento ul, vincularlo a una plantilla de Menú que muestre el elemento ul externo y anidar la plantilla de la barra de menú dentro de ella. Entonces puedo manejar ese único evento foreach con mi función renderMenu, que llama al constructor de la barra de menú jQuery y hace que la barra de menú aparezca en todo su esplendor. Recibí mucha ayuda en este tema de este hilo: nested-templates-with-knockoutjs-and-mvc-3-0.

Aquí está la plantilla de menú:

Y aquí está la plantilla de nodo para cada nodo de la barra de menú:

A continuación, necesitas un elemento div que enlace a MenuTemplate:

Ten en cuenta que la plantilla de nodo utiliza sintaxis de flujo de control sin contenedor, que se basa en etiquetas de comentarios. Hay algunas cosas que están sucediendo aquí, así que déjenme explicarles

En la barra de menú de jQuery completamente renderizada, quiero adjuntar un controlador al evento select. El manejador tiene el evento de la firma, ui. Cuando haces clic en un elemento de la barra de menú, al controlador se le pasa el objeto de evento y un objeto jQuery que representa el elemento. Para obtener el texto del objeto ui, podemos llamar al método de texto (ui.item.text()). Pero, ¿cómo obtenemos la propiedad url del JSON subyacente? Eso es un poco más complicado y lo explico más adelante cuando observamos la función de selección activada por el evento clic en cada elemento del submenú y el addData de enlace personalizado adjunto al elemento li en la plantilla Knockout.

Finalmente, solo necesitas un elemento div donde podamos mostrar el contenido recuperado de los archivos de datos JSON:


Paso 4: Crear las páginas de formulario web que dependen del archivo Main.Master

Default-src.aspx

Crea un formulario web utilizando la página maestra en la carpeta de depuración llamada Default-src.aspx.

add_page_using_master_pageadd_page_using_master_pageadd_page_using_master_page

Esto resulta ser un archivo misericordiosamente corto. Esta es una de las grandes ventajas del enfoque de .NET para las páginas maestras. Solo hay dos ContentPlaceHolders en la página maestra. Agrega los enlaces a tus archivos JavaScript de la siguiente manera al elemento de Contenido vinculado a ContentPlaceHolder de JsScripts:

Crea un nuevo archivo JavaScript llamado default-src.js en la carpeta debug-js\src.

Encerramos todo en una llamada a la función jQuery $ habitual que se asegura de que la página esté completamente cargada, antes de ejecutar cualquier cosa.

A partir de jQuery 1.4, si el archivo JSON contiene un error de sintaxis, la solicitud generalmente fallará en silencio. Ver: jQuery.getJSON().

Necesitamos tres piezas principales de funcionalidad aquí:

  1. Una llamada al método jQuery getJSON para recuperar los datos JSON para la barra de menú. Si esto tiene éxito, creamos un modelo de vista Knockout y llamamos a ko.applyBindings(viewModel) para activarlo.
  2. Una función renderMenu a la que llamará el evento afterRender de MenuTemplate. Esta función llama al constructor menubar para representar la barra de menú.
  3. Una función select que se llama cuando el usuario hace clic en un elemento de la barra de menú. Esta función recupera los datos JSON del archivo de contenido relevante y los muestra en la página.

Observa que la función de selección debe poder recuperar la URL de los datos JSON subyacentes. Esta es la parte más complicada de combinar la funcionalidad de la barra de menú jQuery con la plantilla Knockout. jQuery te permite agregar datos y recuperar datos de un elemento HTML. Para agregar datos dentro de nuestra plantilla Knockout, necesitamos usar un enlace personalizado, que tenga acceso al elemento HTML al que está vinculado. El enlace que he creado se llama addData y simplemente se adjunta a ko.bindingHandlers de la forma habitual de eliminación directa con un método de inicio 'init' llamado 'usual Knockout way' y un método de actualización 'update'.

Quizás la plantilla de nodo tenga más sentido ahora. El objeto jQuery pasado como ui en el controlador select representa el elemento li superior de cada elemento de la barra de menú, por lo que agregamos el enlace personalizado a ese elemento del elemento de la lista: data-bind="addData: $data.url". Ahora que cada elemento tiene algunos datos adjuntos, podemos recuperarlo del controlador select con esta sintaxis: ui.item.data("url"), utilizando el método de data jQuery.

El elemento de enlace es más sencillo y solo utiliza el attr estándar y los enlaces text:

Solo ten en cuenta que he prefijado el href con un símbolo de hash. De esa forma, cuando haces clic en el elemento de la barra de menú, no sigues un enlace a otra página. En su lugar, se desencadena el evento de selección 'select' y el manejador, lo siento, esto lo maneja.

Aquí está la función de selección completa que utiliza este enfoque para recuperar los datos del objeto jQuery que representa el elemento representado por Knockout:

Agregué la captura de error adicional porque jQuery ahora guarda silencio sobre los errores de sintaxis de JSON. No quiero que el usuario esté sobrecargado con los detalles de los errores de sintaxis de JSON, pero quiero dar una idea de lo que podría haber salido mal.

Aquí está el modelo de vista Knockout definido en la función adjunta al método getJSON():


Paso 5: Ejecutar el proyecto en modo de depuración.

Con Default-src.aspx abierto en la ventana IDE, haz clic en ejecutar (la flecha verde justo debajo del menú del IDE) en el modo de depuración.

debugdebugdebug

Después del proceso de construcción, el Default-src.aspx debería aparecer en la ventana de tu navegador. El IDE ejecuta una versión Express del servidor web IIS en segundo plano. En mi caso, el proyecto usa el puerto 54713 en localhost para ejecutar la página:
http://localhost:54713/debug/Default-src.aspx

Default-srcDefault-srcDefault-src

Ahora estamos listos para trabajar en el proceso de construcción de JavaScript.


Integración del proceso de desarrollo de JavaScript en MSBuild

Este proyecto automatizará los dos pasos clave que necesitamos para construir un proyecto complejo de JavaScript:

  • Concatenate: Recopila todos los archivos de origen que necesitas para una página en particular y concatena en un solo archivo. MSBuild no tiene una tarea de Concat integrada como Ant o NAnt, por lo que tendremos que rodar la nuestra basada en este excelente blog Cómo concatenar archivos usando tareas de MSBuild.
  • Minify: Minimiza nuestros propios archivos de origen y concaténalos con los archivos de lanzamiento para producción, como el archivo jQuery, en un archivo comprimido.

Paso 1: Alternar entre el proyecto y editar el archivo de compilación del proyecto

La carpeta donde creaste tu proyecto .NET incluirá archivos que se parecen a estos:

project_fileproject_fileproject_file

El archivo NetTutsMSBuildJs.csproj es solo un archivo XML configurado especialmente para manejar el proceso de MSBuild para este proyecto. Es perfectamente legítimo crear uno de estos manualmente o editarlo para adaptarlo a tu proyecto. Obviamente, para fines puramente .NET es mucho mejor usar la GUI de Visual Studio para configurar este archivo automáticamente, pero el objetivo de este tutorial es mostrarte cómo agregar una compilación de JavaScript, que no es parte del estándar. NET

En Visual Studio, no puedes editar este archivo de proyecto a menos que descargues el proyecto, y no puedes cargar el proyecto si hay un error de sintaxis en el archivo. Por lo tanto, practica descargar y cargar el proyecto para poder editar este archivo de claves. Para descargar el proyecto, haz clic con el botón derecho en el proyecto y haz clic en el elemento Descargar proyecto.

unload_projectunload_projectunload_project

Después de descargar el proyecto, todas las carpetas y archivos desaparecen y solo quedan las soluciones y los proyectos en el Explorador de soluciones. Haz clic derecho en el proyecto y esta vez el menú contextual es muy corto. Selecciona Editar NetTutsMSBuildJs.csproj y se abrirá el archivo de configuración del proyecto.

edit_proj_fileedit_proj_fileedit_proj_file

Ahora, solo para aumentar tu confianza y acostumbrarte a lidiar con esos momentos en los que no puedes cargar el proyecto debido a un error de sintaxis en los archivos del proyecto, escribe un error deliberado cerca del principio del archivo del proyecto: simplemente escribe una letra antes de la primera etiqueta fuera de la estructura del documento XML. Guarda y cierra el archivo. Intenta cargar el proyecto desde el menú contextual y recibirás un mensaje de error que indica que el proyecto no se puede cargar. Sí, Visual Studio es muy estricto como este.

project_load_errorproject_load_errorproject_load_error

Vuelve a abrir el archivo del proyecto, corrige el error, guarda y cierra de nuevo. Cuando vuelvas a cargar el proyecto, debería cargarse sin problemas. Ahora es el momento de editar de verdad. Solo cambiaremos manualmente una cosa en el archivo del proyecto, y eso será agregar un elemento Import que importará un archivo para realizar la compilación de JavaScript.


Paso 2: Crea un archivo de compilación para la compilación JavaScript e impórtalo en el archivo de proyecto.

Si agregas un elemento Import al archivo del proyecto para un archivo que no existe, no podrás cargar el proyecto, así que crea un nuevo archivo de texto llamado js.build en la carpeta jsbuild. Después de ingresar el código XML necesario, el IDE reconocerá este archivo como un archivo XML. No habrá necesidad de asociar la extensión .build con el editor XML. Ingresa este código de inicio en jsbuild\js.build, guarda y cierre.

Ahora, descarga el proyecto y edita el archivo del proyecto agregando esta línea al final del archivo justo antes de la etiqueta de cierre.

Ahora deberías poder volver a cargar el proyecto.


Paso 3: ¡¡¡¡¡Hola, Discworld!!!!!

Cinco signos de exclamación, el signo seguro de una mente loca. - Terry Pratchett, Reaper Man

Estoy un poco aburrido de decir "Hola mundo" al comienzo de cada nuevo tutorial de TI. Así que esta vez, voy a saludar al increíble mundo de los discos de Terry Pratchett.

Abre js.build. El IDE debería notar automáticamente que es un archivo XML. Si no, quizás tienes un XML inválido. Después de agregar el siguiente código para configurar un mensaje "Hello Discworld", el IDE finalmente deberías darte cuenta de que es XML. Asegúrate de que el archivo js.build ahora contenga el siguiente XML. ¡No olvides los cinco signos de exclamación para obtener el sabor correcto de la locura para el Mundo del Disco!

Cuando haces clic derecho en el proyecto y ejecutas la compilación, deberías ver el mensaje en la ventana de resultados.

hello_discworldhello_discworldhello_discworld

Al igual que Ant, MSBuild usa la idea de objetivos para realizar grupos de tareas. El objetivo de AfterBuild es ejecutado automáticamente por MSBuild después de que todo lo demás ha sido construido exitosamente. Estoy incorporando la compilación JavaScript al final de la compilación .NET, por lo que el punto de extensión de AfterBuild parece ser el mejor lugar para colocar esto. Observa cómo AfterBuild se ejecuta automáticamente y dentro de AfterBuild llamamos a nuestro Target HelloDiscworld. He establecido la importancia del mensaje en alto porque, de lo contrario, podría no aparecer en la ventana de resultados.


Paso 4: Clasificar rutas

¡Nos volvimos un poco locos en el Mundo del Disco con demasiados signos de exclamación, ¡pero al menos nuestro archivo de compilación JavaScript parece estar funcionando! BIEN. Dejando de lado las bromas, ahora tenemos que obtener lo más importante en una rutina de construcción correcta: las rutas.

Al igual que con Ant, siempre he tenido problemas para entender las rutas absolutas y relativas en estos archivos de configuración, por lo que quiero pisar con cuidado. Agrega un elemento PropertyGroup en la parte superior del archivo js.build, justo debajo de la etiqueta Project y agrega dos propiedades como esta.

Ahora, modifica el mensaje para que podamos ver lo que contienen estas propiedades:

Ahora limpia y vuelve a construir el proyecto o simplemente elige compilar. El mensaje aparece en la salida de esta manera:

Hello Discworld!!!!! from debug-js\concat


Paso 5: Crear Targets Clean e Init

Encantador. Tenemos nuestro entorno, nuestros archivos de origen y propiedades en el archivo de compilación que contiene rutas relativas que apuntan a los directorios con los que necesitamos trabajar. Ahora podemos agregar un Target CleanJs y un objetivo InitJs para eliminar y hacer los directorios concat y min. Tengo la costumbre de enviar pequeños mensajes de "saludo" a estos objetivos (targets) al desarrollar estos archivos solo para volver a asegurarme de que realmente se están ejecutando o verificando los valores de las propiedades. Encuentro que aumentar la verbosidad de salida en MSBuild tiende a darme una avalancha de información que no necesito, aunque es genial cuando no puedo averiguar dónde he cometido un error.

MSBuild usa rutas relativas simples desde la carpeta raíz de todo el proyecto. Si tienes una carpeta llamada js en tu proyecto, puedes usar el valor js en una propiedad con nombre dentro de un grupo de propiedades sin más complicaciones.

Para ejecutar estos destinos, agrega elementos CallTarget al destino AfterBuild.


Paso 6: Concatenando los archivos

Probablemente ya te estás acostumbrando a editar el archivo js.build. Es posible que hayas notado un mensaje de error molesto vinculado a un texto subrayado con líneas azules onduladas, como esta:

invalid_child_element

Este es un error molesto en Visual Studio que ha estado allí durante bastante tiempo. Los elementos PropertyGroup e ItemGroup se pueden rellenar con cualquier valor que desees. El problema es que Visual Studio informa erróneamente un error para la primera propiedad o elemento que define en uno de estos grupos. Como has visto, ConcatDir funciona cuando construye el proyecto, y no hay problemas para cargar el proyecto. Simplemente ignora estos errores de elementos secundarios no válidos que distraen.

Por fin, algún trabajo de construcción real. Agregamos un nuevo objetivo para concatenar los archivos que queremos. A diferencia de Ant y NAnt, no hay una tarea Concat incorporada, por lo que tenemos que rodar la nuestra con la tarea ReadLinesFromFile

Agrega un nuevo elemento CallTarget al destino AfterBuild en js.build llamando a ConcatenateJsFiles. Reconstruye el proyecto como de costumbre y lo que se ve, se crea mágicamente un archivo llamado default-concat.js en el directorio debug-js\concat. Probablemente tendrás que actualizar el Explorador de soluciones para verlo.

Ahora agrega una nueva página de formulario web llamada Default-concat.aspx a la carpeta debug, vinculándola a la página Main.Master. Esto es muy corto y ligeramente diferente de la página Default-src.aspx. Esta vez, todo el JavaScript que necesitamos se ha concatenado en un solo archivo, por lo que solo necesitas un enlace de etiqueta script para default-concat.js.

Para probar esto, abre la página Default-concat.aspx en la ventana IDE y ejecuta el proyecto nuevamente en el modo de depuración (debug). Deberías ver la barra de menú en pleno funcionamiento en tu navegador con el título "Debug concat" que aparece en la barra de título del navegador.


Paso 7: Etapa Final - Minificando

El objetivo final, target!!!!!

Nuestra barra de menú parece estar funcionando y cuando concatenamos los archivos parece que tenemos el orden correcto y todo va bien en la página Debug-concat.aspx. Ahora es el momento de minimizar los archivos de origen default-src.js y jquery.ui.menubar.js y concatenarlos con los archivos de la versión profesional en el orden correcto. Esto es un poco más complicado porque ahora necesitamos incorporar una dependencia externa que, hasta el momento, no hemos necesitado: el compresor YUI. Hay un puerto .NET, pero estoy tan acostumbrado a la versión de Java que prefiero usar mi antiguo favorito. Crea un nuevo objetivo llamado MinifyJsFiles como este:

Observa la propiedad del compresor. Aquí solo tienes que definir la ruta relativa desde la carpeta project, pero el archivo jar, ejecutado por el proceso Java, necesitará la ruta completa. Afortunadamente, MSBuild proporciona una manera fácil de convertir una ruta relativa en una ruta completa. Utilizas la sintaxis % e invocas la propiedad Fullpath. Este es un ejemplo de metadatos de elementos conocidos de MSBuild.

Agrega otro elemento CallTarget al elemento AfterBuild para llamar al destino MinifyJsFiles.

Ahora nuestro objetivo final. Tenemos que tomar todos los archivos de lanzamiento profesional y concatenarlos con la versión reducida de nuestras fuentes y luego concatenarlos en un solo archivo.

Tienes que tener cuidado con esta propiedad ItemName en los archivos de compilación. Las instancias de propiedades y elementos se almacenan en un contexto global en MSBuild. Si usas el mismo nombre para ItemName en dos objetivos concatenados diferentes, terminarás concatenando todos los archivos de ambos destinos.

Vuelve a compilar el proyecto y ahora deberías ver dos archivos nuevos en la carpeta debug-js\min: default-min.js y jquery.ui.menubar-min.js. La carpeta debug-js ahora debería tener este aspecto después de reconstruir y actualizar el Explorador de soluciones:

debug-js

Crea una nueva página de formulario web llamada Default-min.aspx vinculada a la página Main.Master y colócala en la carpeta debug.


Conclusión

Hemos dado los pasos requeridos en Visual Studio Express 2012 para Web, para crear un proyecto JavaScript que combine Knockout con jQuery UI para crear una barra de menú y luego integrar una compilación JavaScript en la compilación general del proyecto en Visual Studio.

En este tutorial, dimos los pasos requeridos en Visual Studio Express 2012 para Web, para crear un proyecto JavaScript que combine Knockout con jQuery UI para crear una barra de menú desde un archivo de definición JSON y luego integrar una compilación JavaScript de los archivos de origen en el proceso .NET MSBuild. El resultado final fue que teníamos una página web con solo una etiqueta script que contenía todo el complejo JavaScript necesario para ejecutar la página.

Creo que puedes ver lo fácil que sería adaptar este ejemplo a una biblioteca JavaScript muy grande y compleja que se ejecuta en un proyecto .NET. También debería ser razonablemente sencillo desarrollar estas ideas para incluir tareas adecuadas para una versión de lanzamiento. El siguiente paso obvio es copiar el archivo default.js totalmente minimizado y concatenado a la carpeta js, luego incluirlo en un archivo Default.aspx definitivo en el directorio raíz. Con este ejemplo como punto de partida, deberías poder explorar la documentación de MSBuild y desarrollar un archivo de compilación completamente funcional para automatizar cada parte de tu proceso de compilación.

También utilizo este tipo de enfoque para los archivos CSS. En este caso particular, los archivos jQuery UI CSS están tan bien optimizados que casi no vale la pena minimizarlos, pero en otros proyectos puede ser importante para el rendimiento. Un siguiente paso más sofisticado para los grunters sería crear un archivo js.build que ejecute un archivo grunt con una tarea de MSBuild Exec. De esa manera, fácilmente podrías incluir linting y pruebas al proceso de desarrollo.

Otras lecturas

Para obtener más información sobre Visual Studio, este excelente Tuts+ Visual Studio: Web Dev Bliss te guiará sobre cómo integrar Web Essentials y agregará el control de código a tu proceso de compilación, pero desafortunadamente, Web Essentials no está disponible para la edición Express. Mira la respuesta de Mads Kristensen aquí: "...desafortunadamente Express no permite que se instalen extensiones de terceros". Este tutorial está dirigido a los usuarios de la edición Express y espero que te haya brindado un punto de partida para crear tu propia compilación de JavaScript integrada, todo dentro del entorno de Visual Studio Express.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.