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

Usando Ant para construir una biblioteca de JavaScript

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

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.


Requisitos de Software

Para este tutorial, necesitarás NetBeans con Ant instalado. A menudo uso:

  • NetBeans 7.0.1 para proyectos PHP - Ant versión 1.12.1
  • NetBeans 7.1 para proyectos JSP - Ant versión 1.14.1

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.


Justificación: ¿Por qué compilar?

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 menor número posible. Por lo tanto, mi interés en concatenar y minimizar los 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

¿Por qué Ant?

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. El 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 para el éxito de sus esfuerzos de desarrollo. Necesita un entorno estructurado que le permita ejecutar sus procesos de compilació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 de JavaScript. Aprenda más sobre esto aquí en Nettuts+.


Paso 1: Configuración de su entorno

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 archivo exe; Tenemos diferentes inquietudes. Hay al menos tres cosas que necesitamos para un gran proyecto de JavaScript:

  • Fuente de desarrollo: crear un montón de módulos en archivos separados. Este es nuestro código fuente.
  • Concatenar: recopile todos los archivos de origen que necesita para una página en particular y concaténelos en un solo archivo.
  • Minify: minimice los archivos con una herramienta de reducción de datos bien conocida para hacerlos lo más pequeños posible. Prefiero la herramienta de compresor YUI.

Como se puede ver en la captura de pantalla, he creado una carpeta, llamada js para mi JavaScript, y luego agregué las carpetas, src, concat y min.


Paso 2: Ignora el mundo

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 solo un producto de mi imaginación!

Soy un solipsista. ¿Por qué no hay más de nosotros?   

  • Haga clic con el botón derecho en el menú contextual en la carpeta Archivos de origen y agregue un nuevo documento XML, llamado build.xml.
  • Eliminar todo el texto de la plantilla automática y escriba en este texto:

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 con 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 de 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 archivo build.xml 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:


Paso 3: Clasificar caminos

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. Llame a la propiedad root y establezca 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 root? 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. ¡Qué alboroto!

Podrías poner eso después del objetivo del mundo ignorado. Ahora, cuando hace clic con el botón derecho en el destino show-root-path para mostrar para mostrar el menú contextual y luego hace clic en "Run Target," debería ver la ruta correcta a la raíz de su proyecto. En mi caso: C:\NetTuts\BuildJs.


Paso 4: Añadir otras rutas

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.


Paso 5: Concatenar los archivos

Por fin, un trabajo real. Agregamos un nuevo objetivo, que incluye una etiqueta concat, como esta:

Este es solo un ejemplo trivial, pero para mayor rapidez para que pueda seguir, he creado dos archivos JavaScript simples: tree_data.js y tree.js, que dependen de los archivos YUI, yahoo-dom-event.js y treeview-min.js. tree_data.js tiene los siguientes contenidos sin sentido:

Y tree.js simplemente presenta TreeView con esos datos.

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 una etiqueta filelist para asegurar el orden que queremos.

Para los puristas de JavaScript: sé que mi variable treeData 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 objetivo concat. De modo que, un archivo llamado tree-concat.js aparece mágicamente en el directorio concat 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 agregado

Para probar el archivo concatenado. He cambiado las etiquetas de script en tree_concat.html a:


Paso 6: Etapa Final: Minificación

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 etiquetas script a una. 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 a la carpeta yui_compressor en mi proyecto y creé una propiedad en el archivo de compilación:

Cuando ejecutemos el objetivo min, ahora debería ver esta salida y un nuevo archivo, llamado tree-min.js en la carpeta min. 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 minimizado.

En el archivo de prueba, tree_min.html, ahora solo necesito una etiqueta script:


Paso 7: Compilar con un clic

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, compilar. También es útil tener un destino limpio para eliminar los directorios concat y min, y un objetivo de inicio para configurar esos directorios.

El objetivo de compilación ahora debería ejecutarse:    

  1. clean
  2. init
  3. concat
  4. min
  5. all

La forma de combinar todo esto es simplemente agregarlos al atributo dependiente, como este.


Conclusión

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 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 gran biblioteca de JavaScript compleja. Con este ejemplo básico como punto de partida, debería poder explorar la documentación de Ant y desarrollar un archivo de compilación completamente funcional para automatizar cada parte de su 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.

Advertisement
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.