Share
Todas las aplicaciones parecen tener un número de versión de compilación, ¿no es así? En cualquier lugar donde busque consejos sobre la administración de un gran proyecto de software, encontrará que un proceso de compilación automatizado es prácticamente un requisito. He encontrado que es esencial automatizar un proceso de construcción que concatene y minimice los archivos necesarios para una página determinada. Este tutorial desmitificará la herramienta de compilación Ant y le mostrará cómo crear sus propios archivos de compilación flexibles para una biblioteca de JavaScript.
Para este tutorial, necesitarás NetBeans con Ant instalado. A menudo uso:
La herramienta Ant en la versión PHP es una versión ligeramente limitada, pero es ideal para nuestros propósitos, ya que los proyectos PHP no son complicados con un archivo de compilación generado automáticamente. Así que para este tutorial, voy a demostrar con la versión de PHP. Sin embargo, Ant, por supuesto, está disponible en Apache y se usa ampliamente en IDE, como Eclipse. Para la comunidad .Net C #, hay una herramienta llamada Nant, que uso en mis proyectos .NET. Es bastante similar..
En mi primer intento serio de crear una aplicación Ajax de una página, terminé con una lista de casi 40 etiquetas de script que produjeron un tiempo de inicio de más de un minuto. Para que el proyecto fuera manejable, necesitaba contener el código en varios módulos, sin mencionar todos los módulos YUI que se requerían. Después de leer los blogs escritos por el equipo de YUI, me di cuenta de lo importante que es para el rendimiento reducir el número de etiquetas de script al número más pequeño posible. Por lo tanto, mi interés en concatenar y minimizar archivos JavaScript.
La combinación de varios archivos reduce los bytes adicionales de los encabezados HTTP, así como la posible latencia de transferencia causada por el inicio lento de TCP, la pérdida de paquetes, etc..
YUI Blog: Performance Research, Parte 6
El excelente Tomcat 5 Unleashed de Lajos Moczar tuvo una gran influencia en mi actitud para desarrollar una aplicación web completa. Es mucho más que un libro sobre Tomcat. Me dio la motivación, la guía y el coraje para comenzar a usar Ant para desarrollar mis proyectos JSP. Ant está integrado en NetBeans, mi IDE favorito para JSP, y me acostumbré a usar el archivo de compilación generado automáticamente con poca necesidad de edición manual al crear un paquete de clases Java. Sin embargo, a medida que crecía mi comprensión de JavaScript, descubrí que necesitaba un proceso de compilación y me vi obligado a escribir mis propios archivos de configuración de compilación manualmente solo para la parte de JavaScript del proyecto. Build.xml de Moczar para una aplicación Tomcat me dio un gran punto de partida.
Tener un buen ambiente de desarrollo es absolutamente crítico al éxito de sus esfuerzos de desarrollo. Necesita un entorno estructurado que le permita ejecutar sus procesos de construcción de manera eficiente y repetible.
- Lajos Moczar, Tomcat 5 Unleashed
Nota del editor: Si decides no usar Ant, Grunt es una herramienta de construcción fantástica para tus aplicaciones JavaScript. Aprenda más sobre esto aquí en Nettuts+.
Abre un nuevo proyecto en NetBeans. Llamé a la mía NetTutsBuildJs, y la he creado dentro de mi carpeta Nettuts + aquí: C: \ NetTuts \ BuildJs. Obviamente, JavaScript no necesita ser compilado en un exe expediente; Tenemos diferentes inquietudes. Hay al menos tres cosas que necesitamos para un gran proyecto de JavaScript:
Como se puede ver en la captura de pantalla, he creado una carpeta llamada js para mi JavaScript, y luego agregó las carpetas, src, concat y min.
Estoy un poco aburrido de decir "Hola mundo" al comienzo de cada nuevo tutorial de TI, ¿no es así? Así que pensé que sería bueno ignorar el mundo esta vez. Después de todo, podría ser sólo un producto de mi imaginación.!
Soy un solipsista. Porque no hay mas de nosotros?
Accentsconagua
build.xml. Es posible que no note nada ahora, pero si reinicia el IDE, verá que build.xml Ahora tiene un icono especial con un triángulo amarillo asociado a los archivos Ant. Si lo seleccionas, verás que el panel del navegador ahora muestra los objetivos de Ant en su encabezado.
Cada conjunto de tareas en un archivo de compilación Ant se denomina destino, por lo que necesitamos crear un destino de mensaje simple
anidado dentro de la etiqueta del proyecto, así:
Ahora, expanda el build.xml Archivo en el panel Proyecto y verá el nuevo destino en el panel Navegador. Haga clic con el botón derecho en ignore-world-message y debería ver el mensaje en el panel Salida, de esta forma:
Derecha. El mundo puede no existir y lo hemos ignorado, ¡pero al menos Ant parece estar funcionando! Bromas aparte, ahora tenemos que conseguir lo más importante en Ant: los caminos..
Puede que sea un poco lento, pero siempre tuve problemas con esto, así que vamos a pisar con cuidado. Agregue una propiedad a la parte superior del archivo, justo debajo de la etiqueta del proyecto. Llamar a la propiedad raíz y establecer la ubicación en una cadena de longitud cero.
Agregue un nuevo objetivo para mostrar esta ubicación para que podamos asegurarnos de que tenemos nuestros caminos en línea recta. ¿Observa la sintaxis complicada para referirse a la propiedad raíz? Debe incluir el nombre de la propiedad entre comillas dobles, pero, además, tiene que envolverlo con un signo de dólar y una abrazadera a la izquierda, luego cerrarla con una llave a la derecha. Que alboroto!
Podrías poner eso después del objetivo del mundo ignorado. Ahora cuando haces clic derecho en el show-root-path target para mostrar el menú contextual y luego haga clic en "Ejecutar objetivo", debería ver la ruta correcta a la raíz de su proyecto. En mi caso: C: \ NetTuts \ BuildJs.
Encantador. Tenemos nuestro entorno y tenemos una ruta raíz que apunta a la ubicación correcta en nuestro disco duro. Ahora podemos añadir los otros caminos..
Por fin, un trabajo real. Añadimos un nuevo objetivo, que incluye un concat etiqueta, como esta:
Este es solo un ejemplo trivial, pero para mayor rapidez, para que pueda seguirlo, he creado dos archivos JavaScript simples: tree_data.js y tree.js, que dependen de los archivos YUI, yahoo-dom-event.js y vista de árbol-min.js. tree_data.js tiene los siguientes contenidos bastante sin sentido:
var treeData = ["label": "Britain", "children": ["London", "Edinburgh"], "label": "France", "children": ["Paris", "Lyon"] , "label": "Japón", "children": ["Tokyo", "Kyoto"], "label": "Thailand", "children": ["Bangkok", "Pattaya"]]
Y tree.js simplemente rinde un Vista de árbol con esos datos.
YAHOO.util.Event.onDOMReady (function () var tree = new YAHOO.widget.TreeView ("tree", treeData); tree.render ();); Observe que la etiqueta de lista de archivos es exactamente lo que necesitamos aquí. En JavaScript, el orden es importante, por lo que probablemente deseamos primero los datos y luego el archivo de renderización. Si utilizamos una etiqueta que dependía del orden natural de los archivos en el sistema operativo, podríamos obtenerlos en el orden incorrecto. Por lo tanto, laboriosamente escribimos la lista manualmente en un lista de archivos etiqueta para asegurar el orden que queremos.
Para ustedes los puristas de JavaScript por ahí: Sé que mi
treeDataLa variable es una variable global y debería hacerlo de otra manera. Este es solo un ejemplo rápido para explicar cómo usar Ant. Estoy bastante seguro de que las personas que siguen el tutorial también siguen las mejores prácticas actuales para su biblioteca de JavaScript.
Ahora ejecuta el concat objetivo. He aquí, un archivo llamado tree-concat.js aparece mágicamente en el concat directorio y, cuando lo abre, puede ver los datos definidos en la parte superior y la función de representación en la parte inferior.
Para probar esto, he creado dos archivos html simples: tree_src.html y tree_concat.html. En el encabezado, ambos tienen los mismos enlaces a los archivos CSS necesarios para crear el aspecto de Sam para un TreeView.
Justo antes del final del cuerpo en tree_src.html, he añadido
Para probar el archivo concatenado. He cambiado el guión etiquetas en tree_concat.html a:
Nuestra biblioteca de árbol parece estar funcionando y, cuando concatenamos los archivos, parece que obtuvimos el orden correcto. ¡Excelente! Ahora es finalmente el momento de minimizar todo y reducir el número de guión etiquetas hasta uno. Esto es un poco más complicado..
Observe la propiedad del compresor. Para hacer que todo esto se ejecute, copié el archivo jar del compresor YUI al yui_compresor carpeta en mi proyecto y creó una propiedad en el archivo de compilación:
Cuando corremos el min objetivo, ahora debería ver esta salida y un nuevo archivo, llamado tree-min.js en el min carpeta. Si lo abre, verá una larga secuencia continua de JavaScript sin espacios en blanco, todo en una línea.
Solo se necesita un objetivo más: concatenar los dos archivos YUI con nuestro nuevo archivo minified.
En el archivo de prueba, tree_min.html, Ahora solo necesito uno guión etiqueta:
El último paso es agregar un objetivo que llame a todos los objetivos necesarios y los ejecute en el orden correcto. La convención es llamar a este objetivo., construir. También es útil tener un limpiar objetivo para eliminar el concat y min directorios, y una en eso objetivo para configurar esos directorios.
El objetivo de compilación ahora debería ejecutarse:
La forma de combinar todo esto es simplemente agregarlos al atributo dependiente, como este.
Recorrimos los pasos necesarios para crear un archivo de configuración para que Ant construya una biblioteca de JavaScript..
En este tutorial, recorrimos los pasos necesarios para crear un archivo de configuración para que Ant construya una biblioteca de JavaScript. A partir del código fuente, concatenamos todos los archivos de la biblioteca en un solo archivo, asegurando que cada uno de los archivos de origen se agregue en el orden correcto. Probamos el archivo concatenado resultante para asegurarnos de que no faltaba nada o estaba fuera de lugar. Luego, minimizamos ese archivo y lo concatenamos con los archivos YUI de los que dependía.
El resultado final fue que teníamos una página web con una sola. guión etiqueta, que contiene 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 gran biblioteca de JavaScript compleja. Con este ejemplo básico como punto de partida, deberías poder explorar la documentación de Ant y desarrollar un archivo de compilación completamente funcional para automatizar cada parte de tu proceso de compilación..
También utilizo Ant para SQL para construir el clon local de mi base de datos.
Además, también uso este tipo de compilación para archivos CSS. Pueden volverse casi tan complicados como los archivos JavaScript y realmente ayuda a concatenarlos y minimizarlos también. También utilizo Ant para SQL para construir el clon local de mi base de datos. Encuentro que cuando quiero comenzar de nuevo con un proyecto, limpiar todo el código experimental y comenzar de cero, es realmente útil traer una nueva base de datos nueva y agradable. La herramienta Ant facilita la creación rápida de tablas, funciones y procedimientos, y luego rellena el objeto con algunos datos de muestra..
