Share
Tutte le applicazioni sembrano avere un numero di versione build, vero? Ovunque tu stia cercando consigli sulla gestione di un grande progetto software, scoprirai che un processo di compilazione automatizzata è praticamente un requisito. Ho trovato essenziale automatizzare un processo di compilazione che concatena e minimizza i file necessari per una determinata pagina. Questo tutorial dis-mistifica lo strumento di configurazione Ant e ti mostra come creare i tuoi file build flessibili per una libreria JavaScript.
Per questo tutorial, avrai bisogno di NetBeans con Ant installato. Io uso spesso:
Lo strumento Ant nella versione PHP è una versione leggermente limitata, ma è l'ideale per i nostri scopi, perché i progetti PHP non sono complicati con un file di generazione generato automaticamente. Quindi per questo tutorial, dimostrerò con la versione di PHP. Tuttavia, Ant è ovviamente disponibile su Apache ed è ampiamente utilizzato negli IDE, come Eclipse. Per la comunità di .Net C # esiste uno strumento chiamato Nant, che utilizzo nei miei progetti .NET - è abbastanza simile.
Nel mio primo tentativo serio di creare un'applicazione Ajax di una pagina, ho trovato un elenco di quasi 40 tag script che hanno prodotto un tempo di avvio di oltre un minuto. Per rendere il progetto gestibile, avevo bisogno di contenere il codice in più moduli, per non parlare di tutti i moduli YUI richiesti. Dopo aver letto i blog scritti dal team di YUI, ho capito quanto sia importante per le prestazioni ridurre il numero di tag di script il più piccolo possibile. Da qui il mio interesse nel concatenare e minimizzare i file JavaScript.
La combinazione di più file riduce i byte aggiuntivi dalle intestazioni HTTP e la potenziale latenza di trasferimento causata dal rallentamento del protocollo TCP, dalle perdite di pacchetti, ecc..
Blog YUI: Performance Research, parte 6
L'eccellente Tomcat 5 Unlèhed di Lajos Moczar ha avuto un'enorme influenza sulla mia attitudine allo sviluppo di un'applicazione completa basata sul web. È molto più di un libro su Tomcat. Mi ha dato la motivazione, la guida e il coraggio per iniziare a usare Ant per costruire i miei progetti JSP. Ant è incorporato in NetBeans, il mio IDE preferito per JSP, e mi sono abituato a usare il file di generazione generato automaticamente con poca necessità di editing manuale durante la creazione di un pacchetto Java di classi. Tuttavia, man mano che la mia comprensione di JavaScript cresceva, ho scoperto che avevo bisogno di un processo di compilazione ed ero costretto a scrivere manualmente i miei file di configurazione di build solo per la parte JavaScript del progetto. Il build.xml di Moczar per un'applicazione Tomcat mi ha dato un ottimo punto di partenza.
Avere un buon ambiente di sviluppo è assolutamente critico al successo dei tuoi sforzi di sviluppo. È necessario un ambiente strutturato che consente di eseguire i processi di compilazione in modo efficiente e ripetibile.
- Lajos Moczar, Tomcat 5 Unleashed
Nota dell'editore: Se decidi di non usare Ant, Grunt è un fantastico strumento di compilazione per le tue applicazioni JavaScript. Scopri di più qui su Nettuts+.
Aprire un nuovo progetto in NetBeans. Ho chiamato il mio NetTutsBuildJs e l'ho creato nella mia cartella Nettuts + qui: C: \ Nettuts \ BuildJs. Ovviamente, JavaScript non ha bisogno di essere compilato in un EXE file; abbiamo preoccupazioni diverse. Ci sono almeno tre cose di cui abbiamo bisogno per un grande progetto JavaScript:
Come puoi vedere nello screenshot, ho creato una cartella, chiamata js per il mio JavaScript, quindi ho aggiunto le cartelle, src, concat e min.
Sono un po 'annoiato nel dire "Hello World" all'inizio di ogni nuovo tutorial IT, vero? Quindi ho pensato che sarebbe stato bello ignorare il mondo questa volta. Dopotutto, potrebbe essere solo un frutto della mia immaginazione!
Sono un solipsista. Perché non ci sono più di noi?
Accentsconagua
build.xml. Potresti non notare nulla ora, ma se riavvii l'IDE, lo vedrai build.xml ora ha un'icona speciale con un triangolo giallo associato ai file Ant. Se lo selezioni, vedrai il pannello di navigazione che ora mostra gli obiettivi Ant nella sua intestazione.
Ogni insieme di attività in un file di build Ant è chiamato target, quindi è necessario creare un target semplice per i messaggi
nidificati all'interno del tag del progetto, in questo modo:
Ora, espandi il build.xml file nel pannello Progetto e vedrai la nuova destinazione nel pannello Navigatore. Fai clic con il tasto destro del mouse su ignore-world-message e dovresti vedere il messaggio nel pannello Output, in questo modo:
Destra. Il mondo potrebbe non esistere e l'abbiamo ignorato, ma almeno sembra che Ant stia funzionando! A parte gli scherzi, ora dobbiamo ottenere la cosa più cruciale in Ant a destra: i percorsi.
Potrei essere un po 'lento, ma ho sempre avuto problemi con questo, quindi procediamo con cautela. Aggiungi una proprietà all'inizio del file, appena sotto il tag del progetto. Chiama la proprietà radice e impostare la posizione su una stringa di lunghezza zero.
Aggiungi un nuovo obiettivo per visualizzare questa posizione in modo che possiamo assicurarci di avere le nostre strade dritte. Si noti la sintassi convoluta per fare riferimento alla proprietà root? È necessario racchiudere il nome della proprietà tra virgolette doppie, ma, in aggiunta, è necessario avvolgerlo con un simbolo del dollaro e una parentesi graffa sulla sinistra, quindi chiuderlo con una parentesi graffa sulla destra. Che confusione!
Potresti metterlo dopo il bersaglio del mondo ignoto. Ora quando fai clic con il tasto destro del mouse su show-root-path target per mostrare il menu di scelta rapida e quindi fare clic su "Esegui target", si dovrebbe vedere il percorso corretto alla radice del progetto. Nel mio caso: C: \ Nettuts \ BuildJs.
Bello. Abbiamo il nostro ambiente e abbiamo un percorso root che punta alla giusta posizione sul nostro disco rigido. Ora possiamo aggiungere gli altri percorsi.
Alla fine, del vero lavoro. Aggiungiamo un nuovo target, che include a concat tag, come questo:
Questo è solo un esempio banale, ma per rapidità in modo che tu possa seguire, ho creato due semplici file JavaScript: tree_data.js e tree.js, che dipendono dai file YUI, yahoo-dom-event.js e TreeView, min.js. tree_data.js ha i seguenti contenuti piuttosto privi di significato:
var treeData = ["label": "Britain", "children": ["London", "Edinburgh"], "label": "France", "children": ["Paris", "Lyon"] , "label": "Japan", "children": ["Tokyo", "Kyoto"], "label": "Thailand", "children": ["Bangkok", "Pattaya"]]
E tree.js semplicemente rende a Visualizzazione ad albero con quei dati.
YAHOO.util.Event.onDOMReady (function () var tree = new YAHOO.widget.TreeView ("tree", treeData); tree.render ();); Si noti che il tag dell'elenco file è esattamente ciò di cui abbiamo bisogno qui. In JavaScript, l'ordine è importante, quindi probabilmente desideriamo prima i dati e poi il file di rendering. Se usassimo un tag che si basava sull'ordine naturale dei file nel sistema operativo, potremmo ottenerli nell'ordine sbagliato. Quindi, scriviamo laboriosamente l'elenco manualmente in a filelist tag per garantire l'ordine che vogliamo.
Per voi puristi JavaScript là fuori: conosco il mio
treeDatavariabile è una variabile globale e dovrei farlo in un modo diverso. Questo è solo un breve esempio per spiegare come usare Ant. Sono abbastanza sicuro che le persone che seguono il tutorial seguano anche le best practice attuali per la loro libreria JavaScript.
Ora esegui il concat bersaglio. Ecco, un file chiamato alberi concat.js appare magicamente nel concat directory, e, quando lo apri, puoi vedere i dati definiti nella parte superiore e la funzione di rendering in basso.
Per provarlo, ho creato due semplici file html: tree_src.html e tree_concat.html. Nell'intestazione, entrambi hanno gli stessi collegamenti ai file CSS necessari per creare la skin Sam per un TreeView.
Poco prima della fine del corpo dentro tree_src.html, ho aggiunto
Per testare il file concatenato. Ho cambiato il copione tag in tree_concat.html a:
La nostra libreria ad albero sembra funzionare e, quando concateniamo i file, sembra che abbiamo ottenuto l'ordine giusto. Eccellente! Ora è finalmente giunto il momento di minimizzare tutto e ridurre il numero di copione tag fino a uno. Questo è un po 'più complicato.
Si noti il compressore della proprietà. Per fare in modo che tutto funzioni, ho copiato il file jar del compressore YUI su yui_compressor cartella nel mio progetto e creato una proprietà nel file di build:
Quando eseguiamo il min target, dovresti vedere ora questo output e un nuovo file, chiamato alberi min.js nel min cartella. Se lo apri, vedrai un lungo flusso continuo di JavaScript senza spazi bianchi, tutto su una riga.
C'è solo un altro obiettivo necessario: concatenare i due file YUI con il nostro nuovo file minificato.
Nel file di test, tree_min.html, Ora ne ho solo bisogno copione etichetta:
Il passaggio finale consiste nell'aggiungere un obiettivo che richiama tutti gli obiettivi necessari e li esegue nell'ordine corretto. La convenzione è chiamare questo obiettivo, costruire. È anche utile avere un pulito obiettivo per eliminare il concat e min directory e a dentro obiettivo di impostare tali directory.
L'obiettivo di compilazione dovrebbe ora essere eseguito:
Il modo di combinare tutto ciò è semplicemente aggiungerli all'attributo dipende, come questo.
Abbiamo seguito i passaggi necessari per creare un file di configurazione per Ant per creare una libreria JavaScript.
In questo tutorial, abbiamo illustrato i passaggi necessari per creare un file di configurazione per Ant per creare una libreria JavaScript. A partire dal codice sorgente, abbiamo concatenato tutti i file della libreria in un unico file, assicurando che ciascun file di origine sia aggiunto nell'ordine corretto. Abbiamo testato il file concatenato risultante per garantire che nulla fosse mancante o fuori luogo. Abbiamo poi minifatto quel file e lo abbiamo concatenato con i file YUI da cui dipendeva.
Il risultato finale è stato che avevamo una pagina web con una sola copione tag, contenente tutto il complesso JavaScript necessario per eseguire la pagina. Penso che tu possa vedere quanto sarebbe facile adattare questo esempio a una libreria JavaScript molto grande e complessa. Con questo esempio di base come punto di partenza, dovresti essere in grado di esplorare la documentazione di Ant e sviluppare un file di build pienamente funzionante per automatizzare ogni parte del tuo processo di compilazione.
Io uso anche Ant per SQL per costruire il clone locale del mio database.
Inoltre, io uso questo tipo di build anche per i file CSS. Possono diventare quasi contorti come i file JavaScript e aiuta davvero a concatenare e minimizzare anche loro. Io uso anche Ant per SQL per costruire il clone locale del mio database. Trovo che quando voglio ricominciare da capo con un progetto, ripulire tutto il codice sperimentale e partire da zero, è davvero utile portare con sé un nuovo database nuovo e bello. Lo strumento Ant semplifica la creazione rapida di tabelle, funzioni e procedure, quindi inserisce la cosa con alcuni dati di esempio.
