Share
Ti sei mai trovato a svolgere compiti noiosi e ripetitivi come sviluppatore web? Oggi ti mostrerò come puoi tagliare quei meta-compiti dal tuo ciclo di sviluppo con un po 'di automazione. In questo tutorial, imparerai come eseguire facilmente queste attività ripetitive con Apache Ant.
Tutorial ripubblicatoOgni poche settimane, rivisitiamo alcuni dei post preferiti del nostro lettore da tutta la cronologia del sito. Questo tutorial è stato pubblicato per la prima volta nel marzo del 2011.
Ant rende incredibilmente facile definire una serie di attività che è possibile eseguire con pochi comandi.
Ant è un software progettato originariamente per l'automazione delle build del software. È fatto da Apache (sì, come nel server Apache), e il suo scopo principale è quello di costruire applicazioni Java. Quando crei software (o, nel nostro caso, siti web / app), esegui diverse attività identiche ogni volta che crei o pubblichi o distribuisci il tuo progetto. È uno spreco di tempo prezioso per farlo manualmente. Ant rende incredibilmente facile definire una serie di attività che è possibile eseguire con pochi e brevi comandi attraverso il terminale.
Pronto? Iniziamo!
Prima di arrivare a Ant, abbiamo bisogno di un progetto con cui lavorare qui. Ecco il index.html file che sto usando:
Progetto fittizio Pagina di dimostrazione
Ci sono tre file CSS e tre file JavaScript in questo progetto.
- Reset di Eric Meyer
- Grid.css dal Blueprint CSS
- Un foglio di stile personalizzato
- jQuery
- I file di Precedence di Top Down Operator di Douglas Crockford tokens.js e parse.js.
Tutti questi file non sono compressi; questo è il punto di questo tutorial, dopo tutto.
Come puoi vedere, questo spiega il resto del progetto. Se scarichi il progetto (link in alto), otterrai i file CSS e JavaScript.
Quindi, cosa faremo con questo progetto? Come puoi vedere, abbiamo più file CSS e JavaScript collegati in questo progetto. Quello che faremo è compilare e comprimere ciascuno nel suo rispettivo file e FTP tutto su un server. Prima di tutto, inizieremo installando Ant.
Installare Ant può essere un compito piuttosto scoraggiante. Fortunatamente, il processo di installazione di Windows e Mac è abbastanza simile. Se sei su Linux, assumerò che tu abbia già installato Ant, sappia come, o riesca a capirlo senza la mia mano.
Se sei su un Mac, probabilmente hai già installato Ant; tuttavia, alcune delle attività più avanzate (nel nostro caso, FTP) non funzioneranno. Quindi, installeremo l'ultima versione.
Prima di iniziare, ti indicherò le istruzioni complete che Apache offre: puoi ottenerle qui. (Sfortunatamente, questo è l'intero manuale di Ant, non posso fare di meglio, dato che è fatto con i frame. Vedrai il link "Installazione di Apache Ant" nel frame di sinistra.) Quello che ti dico qui sotto può essere trovato in là (e altro ancora), ma la mia versione è un po 'più amichevole per lo sviluppo web.
Prima di tutto, assicuriamoci di avere le giuste dipendenze Java. Che tu sia su Windows o Mac, avrai bisogno del Java Development Kit (JDK) - almeno la versione 1.4. Potete scaricarlo qui. Se non sei sicuro della versione di JDK che hai, esegui il comando java -version nel terminale / riga di comando. A quanto ho capito, il numero di versione di JDK è lo stesso del numero di versione di Java.
Ora, scarica l'ultima versione di Ant. Puoi ottenerlo dalla pagina di download per la distribuzione binaria (ovviamente puoi ottenere l'origine e compilarla tu stesso, se è così che vai). Troverete i collegamenti a metà della pagina:
Una volta scaricato e decompresso, dobbiamo installarlo. Questo è ciò che otterrai:
La prima parte dell'installazione differisce dalla tua piattaforma. Iniziamo con i passaggi di Windows:
Innanzitutto, dovrai scegliere la cartella in cui desideri installare Ant. sono andato con C: \ formica, ma dipende da te. Crea quella cartella e sposta il bidone, lib, e eccetera cartelle dalla cartella di download a quella cartella. Dovrai anche muoverti fetch.xml e get-m2.xml.
Una volta fatto, dovrai impostare alcune variabili ambientali. Se non sei sicuro di come farlo, puoi trovare le istruzioni qui (Crea queste variabili di sistema, anche se, sinceramente, non dovrebbe avere importanza). Questo è ciò che devi impostare:
Accentsconagua
ANT_HOME; questo dovrebbe puntare alla cartella in cui sono stati spostati i componenti Ant. Esempio: C: \ formica.JAVA_HOME; questo potrebbe già essere lì, ma se non lo è, dovrebbe puntare alla cartella che contiene l'installazione di Java. Il mio è C: \ Programmi \ Java \ jdk1.6.0_18.Sentiero variabile. Questo è un elenco di cartelle che la riga di comando cerca attraverso per trovare i comandi che si desidera eseguire. NON sovrascriverlo in modo appropriato; aggiungi ;% ANT_HOME% \ bin alla fine di esso. Da non perdere quel punto e virgola; questo è ciò che separa i percorsi nella lista. Potresti essere in grado di indovinare che il % ANT_HOME% il bit fa riferimento alla variabile che abbiamo creato in precedenza.Ora hai installato Ant su Windows! C'è un altro passo importante, però; quindi salta il pezzo del Mac e continua a seguirlo.
Hai già installato ant sul tuo Mac; puoi vederlo eseguendo il comando quale formica sul terminale. Questo produrrà qualcosa sulla falsariga di / Usr / bin / ant, come il percorso dell'eseguibile Ant che usi. Tuttavia, se effettivamente vai in quella cartella, scoprirai che è solo un link simbolico alle cose reali.
Come puoi vedere, per me è collegato a /usr/share/java/ant-1.8.1/bin/ant. Ora, potresti usare questo, ma quando ho provato, non ero in grado di utilizzare il componente FTP. Piuttosto che installare Ant da qualche altra parte e pasticciare con il link simbolico, ho scelto di farlo: spostare ciò che era nel usr / share / java / ant-1.8.1 cartella in una sottocartella chiamata _vecchio e spostare le nuove cose. Dovrai spostare il bidone, lib, e eccetera cartelle, più il fetch.xml e get-m2.xml File. Ora, quel link simbolico punterà alla versione aggiornata di ant. Se corri ant-versione nel terminale, dovresti vedere che hai la versione 1.8.2 (o qualsiasi altra versione è più recente nel momento in cui stai leggendo questo).
C'è un altro passaggio per completare l'installazione. Ci sono diversi componenti opzionali che non vengono forniti con Ant, ma che ci serviranno per il nostro progetto e che potresti voler usare in fondo alla strada. Prendiamoli adesso.
Inizierai aprendo una riga di comando o un terminale e passando alla directory in cui hai appena installato Ant. Ancora più importante, è la directory in cui metti fetch.xml file in. Ora, esegui questo comando:
ant -f fetch.xml -Ddest = sistema
Questo scaricherà e installerà alcuni componenti opzionali; questo non è uno di quei comandi lampeggianti: potrebbe richiedere alcuni minuti.
Ora hai installato Ant e pronto per essere eseguito; andiamo a lavorare.
build.xml FileAnt utilizza un file XML per archiviare le attività per il progetto corrente.
Ant utilizza un file XML per archiviare le attività per il progetto corrente; quando sei nella directory di quel progetto sulla riga di comando, sarai in grado di eseguire il comando ant TASK_NAME_HERE, e troverà l'attività appropriata all'interno del file XML ed eseguirla.
Se non hai familiarità con XML, non ti preoccupare. XML sta per eXtensible Markup Language ed è molto simile all'HTML. Usa tag e attributi per definire i dati. In realtà, è più simile a XHTML (RIP), in quanto le regole sono rigide: tutti i tag e gli attributi devono essere in minuscolo, i valori sono quotati, un doctype è richiesto, ecc. Non ti preoccupare però, avrai il controllo di esso.
Il file XML che Ant cerca per impostazione predefinita dovrebbe essere denominato build.xml; lo vuoi mettere nella cartella del tuo progetto.
Quindi, che cosa sta andando esattamente nel file XML? Ecco un inizio:
Sembra HTML, eh? La prima riga è un doctype XML. Successivamente, abbiamo il nodo root, che è a progetto. Ho aggiunto due attributi: a nome, che spiega solo ciò che farà la nostra lista di compiti; e a predefinito, che definisce l'attività predefinita da eseguire.
Vedi, ecco come funziona l'idea dell'attività predefinita. Diciamo che creiamo un compito chiamato chiama mamma. Potremmo farlo dal terminale facendo questo:
ant call_mom
Se trovi che la maggior parte delle volte che esegui Ant su un progetto, stai chiamando la stessa attività, ti consigliamo di impostarla come predefinita. Nel nostro caso, abbiamo impostato inizializzare come compito predefinito, quello che verrà eseguito se non diciamo alla formica di eseguire nulla.
formica inizializza
Questi sono entrambi gli stessi.
Ora che abbiamo il nostro build.xml file, creiamo il nostro primo compito.
I compiti sono chiamati obiettivi all'interno del build.xml file. Controllalo:
Ciao mamma!
Collegalo al tuo build.xml file ed esegui ant call_mom sulla console. Dovresti produrre qualcosa di simile a questo:
Buildfile: /path/to/your/build.xml call_mom: [echo] Ciao mamma! BUILD SUCCESSFUL Tempo totale: 0 secondi
Nel suo output, Ant avrà una voce per tutte le attività che vengono eseguite. Quindi, verrà visualizzato qualsiasi output di tali attività, inserito in schede sotto il nome dell'attività appropriato. Come puoi vedere, abbiamo chiamato il eco compito, che stampa tutto ciò che abbiamo messo al suo interno.
Ma come sapevo che echo era un compito? Bene, puoi ottenere un elenco delle attività integrate qui nella documentazione. Questo è un buon momento per sottolineare che molte attività hanno diversi modi di poter essere chiamate. Ad esempio, avremmo potuto anche fare:
Ora che stai iniziando a scaldare le idee di Ant, parliamo di proprietà.
Ant ha proprietà, che sono molto simili a variabili in un linguaggio di programmazione.
Man mano che usi Ant in più, potresti scoprire di avere un boilerplate build.xml file che modifichi leggermente. Una di queste modifiche potrebbe essere il nome di file / cartelle. Ant ha proprietà, che sono molto simili a variabili in un linguaggio di programmazione. Puoi crearli in questo modo (questo è fatto all'interno di un compito).
fogli di stile
Puoi anche spostare tutte queste proprietà in un file separato e importare il file. Questo è quello che faremo qui. Questo ci porta a creare il nostro primo (vero) compito:
Proprietà importate
Abbiamo chiamato il nostro compito get_properties. Comporta due azioni: in primo luogo, usiamo il proprietà compito di importare il file (possiamo farlo con il file attributo). Quindi, facciamo eco a un messaggio che dice che ha avuto successo. È così semplice.
Certo, dovremo creare il ant.properties file. Questo è super-semplice; ecco quello che useremo oggi:
css_dir = css js_dir = js assets_dir = assets
Potresti pensare che ciò lo renda più difficile, perché i nostri nomi di variabili sono più lunghi dei valori stessi. Bene, è vero, ma ci dà una certa flessibilità nell'uso del nostro build.xml file, lo rende più riutilizzabile e più condivisibile.
Ok, ora diventiamo seri. Ovviamente abbiamo ancora un po 'di compiti da creare prima che ci sia un utile build.xml file.
Ecco un elenco delle attività che dobbiamo creare:
Useremo alcune tattiche diverse per fare tutto questo, per dare una buona panoramica di come funziona Ant.
Iniziamo con le attività di compilazione; questi prendono un set di file e li concatenano tutti in un unico file. Ant ha un compito integrato chiamato concat questo fa.
Ho chiamato questo compito concat_css. All'interno, stiamo solo eseguendo il concat compito. Come puoi vedere, il file verrà concatenato in (destfile, o file di destinazione) sarà in attività / style.css. Noterai che sto usando il assets_dir proprietà, che sostituiranno il valore corretto in. È necessario includere gli usi delle proprietà nella notazione dollar-sign-and-braces.
Dentro il concat compito, definiamo a filelist Questo è solo uno dei modi in cui possiamo prendere un sacco di file. Lo sto usando qui perché mi permette di definire l'ordine che mi piacerebbe che questi file fossero concatenati. Gli sto dando un ID, che ci dà accesso al set di file nello stesso modo in cui useremmo un parametro (anche se non lo faremo). Ha anche l'attributo dir, che indica al task la cartella in cui trovare i file. Quindi, all'interno, basta definire l'appropriato file nodi, con i loro nome attributo contenente il nome del file.
Ecco il tuo primo vero compito! Spero che abbia senso. Mentre ci siamo, quello di JavaScript non è troppo diverso:
La compressione diventa un po 'più complicata, perché non è integrata in Ant. Tuttavia, Ant supporta attività esterne tramite file java .jar. Questo è incredibilmente utile per noi, perché YUI Compressor è disponibile come file .jar (è l'unico modo in cui è disponibile). È possibile scaricarlo nella pagina di download della libreria YUI. Dovrai salvarlo in una posizione intelligente e forse rinominarlo. L'ho salvato MY_USER_FOLDER / bin / yui.jar. Fai ciò che ti piace.
Ora, YUI Compressor comprimerà sia JavaScript che CSS. Quello che possiamo fare qui è crearne uno comprimere compito, quindi chiamarlo da due attività più specifiche. Possiamo farlo perché Ant ha il supporto per chiamare altre attività e passare i parametri. Vediamo come funziona:
$ File
Stiamo usando il Giava comando qui. Questo è molto simile all'esecuzione del file jar dalla riga di comando. Il vaso attributo punti al file jar. Se la forchetta l'attributo è vero, il jar verrà eseguito in una macchina virtuale Java separata da quella su cui è in esecuzione Ant. Quindi, all'interno del Giava nodo, definiamo gli argomenti. Sulla riga di comando, passeremmo input.file -o output.file. Quindi, facciamo la stessa cosa qui.
Ma, dov'è il file proprietà proveniente? Da qui:
Questo è il nostro compito di compressione CSS. Innanzitutto, nota che il bersaglio il nodo ha un secondo attributo: dipende. Probabilmente puoi intuire che questo significa che il compress_css i compiti dipendono dal concat_css compito, quindi deve essere eseguito prima. In questo modo, possiamo chiamare compress_css e chiamerà automaticamente concat_css primo.
Ora, cosa sta succedendo dentro? Stiamo eseguendo un antcall compito, che semplicemente chiama un altro compito all'interno del nostro build.xml file: in questo caso, questo è il nostro comprimere compito. Al suo interno, possiamo creare tutti i parametri di cui abbiamo bisogno, ognuno con un nome e un valore. Sì, questo è molto simile a chiamare una funzione. Questo è il file parametro che usiamo all'interno del nostro comprimere compito.
Ed ecco la versione JavaScript:
Non dimenticare, da questo dipende concat_js.
Torno in cima alla nostra radice progetto nodo-abbiamo impostato il predefinito compito come inizializzare. Non abbiamo ancora creato quell'attività, quindi facciamolo ora.
Fatto!
Questo compito dipende da altri due compiti (uno dei quali non è stato ancora creato); utilizziamo solo un elenco separato da virgole per richiedere più attività.
All'interno, il primo compito è quello di creare la nostra directory di risorse, con il mkdir compito (proprio come sulla riga di comando). Successivamente, ne facciamo due antcalls, uno per comprimere il CSS e uno per comprimere il JavaScript. Ricorda, questi due compiti dipendono dalle rispettive funzioni di concatenazione, quindi chiameranno quelli. Alla fine, lo faremo eco un messaggio che informa l'utente che abbiamo finito.
Che dire di questo pulire compito quello inizializzare dipende da? È piuttosto semplice:
Elimina semplicemente la directory delle risorse. Questo non è completamente necessario, ma potresti trovarlo utile.
Creiamo un altro compito; vogliamo caricare il nostro progetto su un server. Grazie al ftp comando, questo è un gioco da ragazzi.
Stiamo chiamando questo compito caricare files, e dipende da inizializzare. Stiamo utilizzando l'attività FTP qui. Come puoi vedere, tutte le informazioni importanti sono memorizzate negli attributi. Se hai già lavorato con client FTP, tutte queste opzioni dovrebbero essere familiari.
ftp nodo, abbiamo creato una raccolta di file che vogliamo caricare. In questo caso, stiamo usando un set di file elemento. dir attributo sul filset nodo che definisce la directory radice per ciò che vogliamo raccogliere.includere nodo per ottenere i file specifici: passiamo appena come attributo nome il file (s) che vogliamo ottenere. Nel nostro esempio, stiamo ricevendo tutto ciò che riguarda la directory delle risorse e il suo contenuto, e il file index.html.Una volta inserite le informazioni del server in questa attività, è necessario caricarle per voi!
Notate come abbiamo organizzato queste attività, però. Se corriamo formica sulla riga di comando, siamo concatenati e comprimiamo CSS e JavaScript, ma non lo caricheremo; quello non è il default. Se vogliamo caricarlo, possiamo correre ant upload_files; dal momento che dipende inizializzare, non dobbiamo chiamare inizializzare primo. Ovviamente, possiamo chiamare qualsiasi attività individuale che desideriamo (ad esempio: ant compress_js).
Prima di chiudere, ci sono alcune stranezze che vorrei menzionare:
dipende compito per le attività in cascata. Potresti farlo, ma ho scelto di mantenerlo in attività dipendenti e reali e di creare il inizializzare compito di chiamare gli altri. Questo sembra solo più corretto semanticamente.eco compito). Gli schemi che ho usato non sono affatto la "strada giusta". Inoltre, Ant Wiki è una grande risorsa.E questo è un involucro! Spero che tu abbia imparato alcune nuove tecniche che ti faranno risparmiare tempo in futuro. Se hai qualche domanda, sentiti libero di postarli qui sotto! Grazie mille per la lettura!
