Share
Vous êtes-vous déjà retrouvé dans des tâches ennuyeuses et répétitives en tant que développeur web? Aujourd'hui, je vais vous montrer comment vous pouvez éliminer ces méta-tâches de votre cycle de développement avec un peu d'automatisation. Dans ce didacticiel, vous allez apprendre à effectuer facilement ces tâches répétitives avec Apache Ant..
Tutoriel republiéToutes les quelques semaines, nous revoyons certains des articles préférés de nos lecteurs tout au long de l'histoire du site. Ce tutoriel a été publié pour la première fois en mars 2011..
Ant facilite énormément la définition d'un ensemble de tâches que vous pouvez ensuite exécuter avec quelques commandes..
Ant est un logiciel initialement conçu pour automatiser les versions de logiciels. Il est fait par Apache (oui, comme sur le serveur Apache), et son but principal est de créer des applications Java. Lorsque vous créez un logiciel (ou, dans notre cas, des sites Web / applications), vous effectuez plusieurs tâches identiques à chaque fois que vous créez, publiez ou déployez votre projet. C'est une perte de votre temps précieux de le faire manuellement. Ant facilite énormément la définition d'un ensemble de tâches que vous pouvez ensuite exécuter avec quelques commandes simples via le terminal..
Prêt? Commençons!
Avant d'arriver à Ant, nous devons avoir un projet sur lequel travailler. Ici se trouve le index.html fichier que j'utilise:
Projet factice Page de démonstration
Il y a trois fichiers CSS et trois fichiers JavaScript dans ce projet.
- Eric Meyer Reset
- Grid.css du Blueprint CSS
- Une feuille de style personnalisée
- jQuery
- La priorité top down operator de Douglas Crockford contient les fichiers tokens.js et parse.js.
Tous ces fichiers ne sont pas compressés. c'est le but de ce tutoriel, après tout.
Comme vous pouvez le constater, cela explique le reste du projet. Si vous téléchargez le projet (lien en haut), vous obtiendrez les fichiers CSS et JavaScript.
Alors, qu'allons-nous faire avec ce projet? Comme vous pouvez le constater, plusieurs fichiers CSS et JavaScript sont liés dans ce projet. Ce que nous ferons est de compiler et de compresser chacun dans son fichier respectif et de tout transférer par FTP sur un serveur. Avant tout, nous allons commencer par installer Ant.
Installer Ant peut être une tâche plutôt décourageante. Heureusement, le processus d'installation Windows et Mac est assez similaire. Si vous êtes sous Linux, je vais supposer que vous avez déjà installé Ant, que vous savez comment faire ou que vous pouvez le résoudre sans ma main..
Si vous utilisez un Mac, Ant est probablement déjà installé. Cependant, certaines des tâches les plus avancées (dans notre cas, FTP) ne fonctionneront pas. Donc, nous allons installer la dernière version.
Avant de commencer, je vous indiquerai les instructions complètes proposées par Apache: vous pouvez les obtenir ici. (Malheureusement, c'est tout le manuel de Ant; je ne peux pas faire mieux, comme c'est le cas pour les cadres. Vous verrez le lien «Installer Apache Ant» dans le cadre de gauche.) Ce que je vous dis ci-dessous peut être trouvé. là-bas (et plus encore), mais ma version est un peu plus conviviale pour les développeurs Web.
Tout d'abord, assurons-nous que nous avons les bonnes dépendances Java. Que vous soyez sous Windows ou Mac, vous aurez besoin du kit de développement Java (JDK), version minimum 1.4. Vous pouvez le télécharger ici. Si vous ne savez pas quelle version du JDK vous avez, exécutez la commande version java dans le terminal / ligne de commande. Si je comprends bien, le numéro de version du JDK est le même que celui de la version de Java..
Maintenant, téléchargeons la dernière version de Ant. Vous pouvez l'obtenir à partir de la page de téléchargement de la distribution binaire (bien sûr, vous pouvez obtenir le source et le compiler vous-même, si c'est comme cela que vous obtenez). Vous trouverez les liens à mi-chemin de la page:
Une fois que vous l'avez téléchargé et décompressé, nous devons l'installer. Voici ce que vous obtiendrez:
La première partie de l'installation diffère selon votre plate-forme. Commençons par les étapes de Windows:
Tout d’abord, vous devrez choisir le dossier dans lequel vous souhaitez installer Ant. J'y suis allé avec C: \ ant, Mais c'est à toi de voir. Créez ce dossier et déplacez le poubelle, lib, et etc dossiers de votre dossier de téléchargement vers ce dossier. Vous aurez aussi envie de bouger fetch.xml et get-m2.xml.
Une fois que vous avez fait cela, vous devrez configurer certaines variables environnementales. Si vous ne savez pas comment faire cela, vous pouvez trouver des instructions ici (Définissez ces variables système, bien que, honnêtement, cela ne devrait pas avoir d'importance). Voici ce que vous aurez besoin de configurer:
Accentsconagua
ANT_HOME; Cela devrait indiquer le dossier dans lequel vous avez déplacé les composants Ant. Exemple: C: \ ant.JAVA_HOME; cela existe peut-être déjà, mais si ce n'est pas le cas, cela devrait pointer vers le dossier contenant votre installation Java. Le mien est C: \ Program Files \ Java \ jdk1.6.0_18.Chemin variable. Il s'agit d'une liste de dossiers dans lesquels la ligne de commande effectue une recherche pour rechercher les commandes à exécuter. NE PAS écraser ceci de manière compétitive; il suffit d'ajouter ;% ANT_HOME% \ bin à la fin de celui-ci. Ne manquez pas ce point-virgule; c'est ce qui sépare les chemins de la liste. Vous pourriez peut-être deviner que le % ANT_HOME% références bit la variable que nous avons faite plus tôt.Maintenant, Ant est installé sur Windows! Il y a cependant une autre étape importante. alors sautez pver le morceau Mac et continuez à suivre.
Ant est déjà installé sur votre Mac; vous pouvez le voir en lançant la commande quelle fourmi sur le terminal. Cela produira quelque chose le long des lignes de / usr / bin / ant, en tant que chemin d'accès à l'exécutable Ant que vous utilisez. Cependant, si vous allez dans ce dossier, vous constaterez qu'il ne s'agit que d'un lien symbolique vers les véritables éléments..
Comme vous pouvez le constater, pour moi, cela est lié à /usr/share/java/ant-1.8.1/bin/ant. Maintenant, vous pouvez l'utiliser, mais lorsque j'ai essayé, je n'ai pas pu utiliser le composant FTP. Plutôt que d’installer Ant ailleurs ailleurs et de jouer avec le lien symbolique, j’ai choisi de faire ceci: déplacer ce qui était dans la usr / share / java / ant-1.8.1 dossier dans un sous-dossier appelé _vieux et déplacez le nouveau dans po Vous devrez déplacer le poubelle, lib, et etc dossiers, plus le fetch.xml et get-m2.xml des dossiers. Maintenant, ce lien symbolique désignera la version mise à jour de ant. Si vous courez fourmi -version dans le terminal, vous devriez voir que vous avez la version 1.8.2 (ou la version la plus récente au moment où vous lisez ceci).
Il reste encore une étape pour terminer l’installation. Il existe plusieurs composants facultatifs qui ne viennent pas avec Ant, mais dont nous aurons besoin pour notre projet et que vous voudrez peut-être utiliser plus tard. Allons les chercher maintenant.
Vous commencerez par ouvrir une ligne de commande ou un terminal, puis le répertoire dans lequel vous venez d'installer Ant. Plus important encore, c'est le répertoire dans lequel vous mettez le fetch.xml file in. Maintenant, lancez cette commande:
ant -f fetch.xml -Ddest = system
Cela téléchargera et installera quelques composants optionnels; ce n'est pas une de ces commandes: cela pourrait prendre quelques minutes.
Maintenant, Ant est installé et prêt à fonctionner. Mettons-nous au travail.
build.xml FichierAnt utilise un fichier XML pour stocker les tâches du projet en cours..
Ant utilise un fichier XML pour stocker les tâches du projet en cours. lorsque vous êtes dans le répertoire de ce projet sur la ligne de commande, vous pourrez exécuter la commande ant TASK_NAME_HERE, et il trouvera la tâche appropriée dans le fichier XML et l'exécutera.
Si vous n'êtes pas familier avec XML, ne vous inquiétez pas. XML signifie eXtensible Markup Language, et il ressemble beaucoup à HTML. Il utilise des balises et des attributs pour définir les données. En fait, cela ressemble plus au XHTML (RIP), en ce que les règles sont strictes: toutes les balises et tous les attributs doivent être en minuscules, les valeurs sont citées, un doctype est requis, etc. Ne vous inquiétez pas, vous comprendrez il.
Le fichier XML que Ant recherche par défaut doit être nommé build.xml; vous voudrez le mettre dans votre dossier de projet.
Alors, qu'est-ce qui se passe exactement dans le fichier XML? Voici un début:
On dirait du HTML, hein? La première ligne est un doctype XML. Ensuite, nous avons le nœud racine, qui est un projet. J'ai ajouté deux attributs: un prénom, qui explique simplement ce que notre liste de tâches fera; et un défaut, qui définit la tâche par défaut à exécuter.
Vous voyez, voici comment fonctionne l’idée de tâche par défaut. Disons que nous créons une tâche appelée appel maman. Nous pourrions exécuter cela depuis le terminal en faisant ceci:
ant call_mom
Si vous trouvez que la plupart du temps, vous exécutez Ant sur un projet et que vous appelez la même tâche, vous voudrez en faire la valeur par défaut. Dans notre cas, nous avons défini initialiser comme tâche par défaut, celle qui sera exécutée si nous ne disons rien à ant.
ant initialise ant
Ce sont les mêmes.
Maintenant que nous avons notre build.xml fichier, créons notre première tâche.
Les tâches sont appelées des cibles dans le build.xml fichier. Regarde ça:
salut maman!
Branchez ceci dans votre build.xml déposer et exécuter ant call_mom sur la console. Vous devriez sortir un résultat qui ressemble à ceci:
Buildfile: /path/to/your/build.xml call_mom: [echo] Bonjour maman! BUILD SUCCESSFUL Temps total: 0 secondes
Dans sa sortie, Ant aura une entrée pour toutes les tâches exécutées. Ensuite, toute sortie de ces tâches sera affichée, onglet sous le nom de la tâche appropriée. Comme vous pouvez le voir, nous avons appelé le écho tâche, qui imprime tout ce que nous mettons à l'intérieur.
Mais comment savais-je que l'écho était une tâche? Eh bien, vous pouvez obtenir une liste des tâches intégrées ici dans la documentation. C'est un bon moment pour souligner que plusieurs tâches peuvent être appelées de différentes manières. Par exemple, nous aurions aussi pu faire:
Maintenant que vous commencez à vous familiariser avec les idées de Ant, parlons des propriétés.
Ant a des propriétés qui ressemblent beaucoup à des variables dans un langage de programmation.
Si vous utilisez Ant plus, vous pourriez constater que vous avez un passe-partout build.xml fichier que vous modifiez légèrement. L’un de ces réglages peut être un nom de fichier / dossier. Ant a des propriétés qui ressemblent beaucoup à des variables dans un langage de programmation. Vous pouvez les créer de cette façon (cela se fait dans une tâche).
feuilles de style
Vous pouvez également déplacer toutes ces propriétés dans un fichier séparé et importer le fichier. C'est ce que nous ferons ici. Cela nous amène à créer notre première (vraie) tâche:
Propriétés importées
Nous avons appelé notre tâche get_properties. Il s’agit de deux actions: premièrement, nous utilisons le propriété tâche pour importer le fichier (nous pouvons le faire avec le fichier attribut). Ensuite, nous faisons écho à un message disant que c'était réussi. C'est si simple.
Bien sûr, nous devrons créer le ant.properties fichier. C'est super simple. voici celui que nous utiliserons aujourd'hui:
css_dir = css js_dir = js assets_dir = assets
Vous pensez peut-être que cela rend les choses plus difficiles, car les noms de nos variables sont plus longs que les valeurs elles-mêmes. C’est vrai, mais cela nous donne une certaine souplesse dans l’utilisation de nos build.xml fichier, le rend plus réutilisable et plus partageable.
Bon, passons maintenant au sérieux. Nous avons évidemment pas mal de tâches à créer avant d’avoir une utile build.xml fichier.
Voici une liste des tâches que nous devons créer:
Nous allons utiliser différentes tactiques pour faire tout cela, afin de donner un bon aperçu du fonctionnement de Ant..
Commençons par les tâches de compilation; ceux-ci prennent un ensemble de fichiers et les concaténent dans un seul fichier. Ant a une tâche intégrée nommée concat ça fait ça.
J'ai nommé cette tâche concat_css. À l'intérieur, nous ne faisons que concat tâche. Comme vous pouvez le constater, le fichier dans lequel ils seront concaténés (destfile, ou fichier de destination) sera dans assets / style.css. Vous remarquerez que je l'utilise assets_dir properties, qui substituera la valeur correcte dans. Vous devez envelopper les utilisations des propriétés dans la notation dollar-sign-and-accolades.
À l'intérieur de concat tâche, nous définissons un liste de fichiers Ce n’est qu’un des moyens par lesquels nous pouvons récupérer un tas de fichiers. Je l'utilise ici car cela me permet de définir l'ordre dans lequel ces fichiers doivent être concaténés. Je lui donne un identifiant qui nous donne accès à l'ensemble de fichiers de la même manière que nous utilisons un paramètre (bien que ce ne soit pas le cas). Il a aussi l'attribut dir, qui indique à la tâche dans quel dossier trouver les fichiers. Ensuite, à l’intérieur, définissez simplement le fichier approprié. fichier nœuds, avec leurs prénom attribut contenant le nom de fichier.
Voilà votre première vraie tâche! Espérons que cela a du sens. Pendant que nous y sommes, le JavaScript n'est pas trop différent:
La compression devient un peu plus délicate, car elle n'est pas intégrée à Ant. Cependant, Ant prend en charge les tâches extérieures via des fichiers java .jar. C’est extrêmement pratique pour nous, car YUI Compressor est disponible au format .jar (c’est la seule manière dont il est disponible). Vous pouvez le télécharger sur la page de téléchargement de la bibliothèque YUI. Vous voudrez l'enregistrer dans un emplacement intelligent, et peut-être le renommer. Je l'ai sauvegardé MY_USER_FOLDER / bin / yui.jar. Faites ce qui vous plait.
Maintenant, YUI Compressor va compresser JavaScript et CSS. Ce que nous pouvons faire ici est de créer un compresse tâche, puis appelez-la à partir de deux tâches plus spécifiques. Nous pouvons le faire car Ant est capable d'appeler d'autres tâches et de transmettre des paramètres. Voyons comment cela fonctionne:
$ fichier
Nous utilisons le Java commande ici. Cela ressemble beaucoup à l’exécution du fichier jar à partir de la ligne de commande. le pot attribut pointe vers le fichier jar. Si la fourchette Si l'attribut est true, le fichier jar sera exécuté sur une machine virtuelle Java distincte de celle sur laquelle Ant est en cours d'exécution. Puis, à l'intérieur du Java noeud, nous définissons les arguments. Sur la ligne de commande, nous passons input.file -o output.file. Donc, nous faisons la même chose ici.
Mais, où est le fichier propriété venant de? D'ici:
Ceci est notre tâche de compression CSS. Tout d'abord, notez que le cible Le noeud a un deuxième attribut: dépend. Vous pouvez probablement deviner que cela signifie que le compress_css les tâches dépendent de la concat_css tâche, donc il doit être exécuté en premier. De cette façon, nous pouvons appeler compress_css et il appellera automatiquement concat_css premier.
Maintenant, que se passe-t-il à l'intérieur? Nous exécutons un antcall tâche, qui appelle simplement une autre tâche au sein de notre build.xml file-dans ce cas, c'est notre compresse tâche. À l'intérieur de cela, nous pouvons créer autant de paramètres que nécessaire, chacun ayant un nom et une valeur. Oui, cela ressemble beaucoup à appeler une fonction. C'est le fichier paramètre que nous utilisons dans notre compresse tâche.
Et voici la version JavaScript:
N'oubliez pas que celui-ci dépend de concat_js.
Retour au sommet sur notre racine projet noeud-nous définissons le défaut tâche comme initialiser. Nous n'avons pas encore créé cette tâche, alors faisons-le maintenant.
Terminé!
Cette tâche dépend de deux autres tâches (dont l'une n'a pas encore été créée). nous utilisons simplement une liste séparée par des virgules pour nécessiter plusieurs tâches.
À l'intérieur, la première tâche consiste à créer notre répertoire d'actifs, avec le mkdir tâche (comme sur la ligne de commande). Ensuite, nous faisons deux antcalls, un pour compresser le CSS et un pour compresser le JavaScript. Rappelez-vous que ces deux tâches dépendent de leurs fonctions de concaténation respectives, elles seront donc appelées. Enfin, nous allons écho un message informant l'utilisateur que nous avons terminé.
Que dire de cela nettoyer tâche qui initialiser dépend de? C'est assez simple:
Il supprime simplement le répertoire des actifs. Ce n'est pas tout à fait nécessaire, mais vous pourriez le trouver utile.
Créons une tâche de plus; nous voulons télécharger notre projet sur un serveur. Grace à ftp commande, c'est un jeu d'enfant.
Nous appelons cette tâche télécharger des fichiers, et cela dépend de initialiser. Nous utilisons la tâche FTP ici. Comme vous pouvez le constater, toutes les informations importantes sont stockées dans les attributs. Si vous avez déjà travaillé avec des clients FTP, toutes ces options devraient vous être familières..
ftp noeud, nous avons créé une collection de fichiers que nous voulons télécharger. Dans ce cas, nous utilisons un ensemble de fichiers élément. dir attribuer sur le fils noeud qui définit le répertoire racine de ce que nous voulons collecter.comprendre noeud pour obtenir les fichiers spécifiques: nous passons simplement comme attribut name le (s) fichier (s) que nous voulons obtenir. Dans notre exemple, nous obtenons tout le répertoire assets et son contenu, ainsi que le fichier index.html.Une fois que vous avez renseigné les informations de votre serveur dans cette tâche, il devrait télécharger ces fichiers pour vous.!
Remarquez comment nous avons organisé ces tâches. Si nous courons fourmi sur la ligne de commande, nous concaténons et compressons le CSS et le JavaScript, mais nous ne le téléchargerons pas; ce n'est pas le défaut. Si nous voulons le télécharger, nous pouvons exécuter ant upload_files; puisque cela dépend de initialiser, on n'est pas obligé d'appeler initialiser premier. Bien sûr, nous pouvons appeler n'importe quelle tâche individuelle de notre choix (par exemple: ant compress_js).
Avant de terminer, il y a quelques petites choses que je voudrais mentionner:
dépend tâche de chaîner les tâches ensemble. Vous pouvez le faire, mais j'ai choisi de garder cela pour les tâches dépendantes réelles, et créer le initialiser tâche d'appeler les autres. Cela semble juste plus correct sémantiquement.écho tâche). Les modèles que j'ai utilisés ne sont en aucun cas la «bonne manière». En outre, le Wiki Ant est une excellente ressource..Et c'est un wrap! J'espère que vous avez appris de nouvelles techniques qui vous feront gagner du temps dans le futur. Si vous avez des questions, n'hésitez pas à les poster ci-dessous! Merci beaucoup pour la lecture!
