Share
Selon yeoman.io, "Yeoman est un ensemble d'outils, de bibliothèques et un flux de travail robustes et éclairés qui peuvent aider les développeurs à créer rapidement de superbes applications Web attrayantes." Creusons dedans et voyons exactement ce que cela signifie!
_ .--------------------------. _ | o | _ | Bienvenue chez Yeoman, | | _ | | Mesdames et Messieurs! | / \ Y / \ o _________________________ | || : | // o / --- \ _ \ \ / _
Ces jours-ci, la création d'applications Web nécessite beaucoup de travail. Il existe d'innombrables bibliothèques à utiliser, modèles, styles, grilles, cartes mères, bootstraps… la liste est longue! Yeoman est une réponse à certaines de ces questions. Plutôt que de perdre beaucoup de temps à mettre une application en marche, Yeoman fait le gros du travail pour vous - ne nécessitant que quelques commandes..
Le moyen le plus rapide de commencer à utiliser Yeoman est d'exécuter le script suivant.
curl -L get.yeoman.io | shRemarque: Yeoman est pris en charge par OSX, Linux et Windows. Ce processus dure environ 10 minutes. Dans une future mise à jour, ce processus d’installation sera modifié, cependant.
Donc c'était facile. Qu'est-ce qui vient juste de se passer? Beaucoup de choses! le install.sh déposer ,get.yeoman.io, a un en-tête qui décrit exactement ce qui s'est passé.
# * Detect Mac ou Linux, choisissez le gestionnaire de paquets à utiliser # * Sous Mac, installez homebrew s'il n'est pas présent # * Ensuite, installez-les: git optipng jpeg-turbo phantomjs # * Assurez-vous que Ruby> = 1.8.7 existe, installez-le. sinon (pour Compass) # * Installez le dernier package NodeJS # * Installez Compass # * Téléchargez le zip Yeoman dans un dossier temporaire # * Installez-le en tant que module de noeud global
Et voilà!
Yeoman est installé en tant que module de noeud global. Ouvrez donc votre TOC (Terminal of Choice) et exécutez-le. yeoman.
La première fois que cela fonctionne, il vous demandera si vous souhaitez leur permettre de conserver des statistiques sur votre utilisation de Yeoman. Ils ont en fait un compte Google Analytics qui permet de suivre toutes sortes de statistiques d'utilisation intéressantes..
Simplement en cours d'exécution yeoman à partir de maintenant imprimera une liste des commandes disponibles pour exécuter.
Accentsconagua
yeoman initC'est là que se passe la magie des échafaudages. Exécutez la commande suivante pour une application échafaudée de base.
yeoman init
Cette commande posera cinq questions:
Hors de la boîte, en cours d'exécution init inclura HTML5 Boilerplate, et jQuery et Modernizr. Voici une liste plus étendue.
Il compilera également les fichiers CoffeeScript et Compass directement de la boîte.!
Générateurs sont la magie derrière tous les échafaudages. le init La commande, elle-même, est basée sur un générateur. Il existe un référentiel séparé pour eux. Il en existe déjà beaucoup, y compris Colonne vertébrale, Ember, et Angulaire pour n'en nommer que quelques-uns. Pour voir une liste de tous, lancez simplement…
yeoman init --help
Les générateurs sont une énorme partie de Yeoman, et sont destinés à être modifiés et ajoutés à.
Pointe: Pour obtenir de l'aide sur la création de votre propre générateur, reportez-vous à la section générateurs de la documentation..Si vous voulez créer votre propre application Backbone.js, vous pouvez simplement lancer:
mkdir backboneapp && cd backboneapp backbone yeoman init
Cela construira un projet avec plusieurs modèles standard, vues, collections, préchargés avec Lodash, Mocha, jQuery et HTML5..
Vous pouvez faire la même chose avec angulaire et braise comme mentionné précédement.
Il y a plusieurs sous-générateurs aussi, qui vous permettent de faire des choses, comme:
backbone yeoman init: voir awesomeView backbone yeoman init: modèle awesomeModel backbone yeoman init: collection awesomeCollection backbone yeoman init: routeur awesomeRouter
Alors BAM, vous aurez de nouveaux codez travailler avec, plutôt que de perdre beaucoup de temps à réécrire le code standard!
yeoman construireSous les couvertures, vous trouverez Grunt, un framework populaire, créé par Ben Alman (Cowboy), pour la création d'applications JavaScript. Il repose sur un grognement fichier d'options de configuration qui configurent les tâches pour effectuer diverses opérations, telles que lier, combiner, réduire, etc..
Yeoman est construit sur Grunt, mais l’étend pour offrir de nouvelles modifications et fonctionnalités. Ceux-ci inclus:
r.js La configuration sera placée dans un gruntfile.js fichier dans l'application générée. Lorsque vous avez fini de développer, lancez ce qui suit pour créer l'application.
yeoman construire
Votre application nouvellement construite sera placée dans un dist / dossier. Une fonctionnalité intéressante est la façon dont Yeoman prendra les références de script, telles que:
Et, après avoir exécuté le build, concattez et réduisez ces fichiers en un seul scénario référence. C'est douze demandes HTTP à une!
Chacune des étapes du processus de construction peut être trouvée dans gruntfile.js, qui est généré lors de la création de l'application. Il y a aussi plusieurs options de construction.
serveur yeoman Yeoman propose également un serveur d'hébergement intégré pour tester votre application localement. LiveReload ou la simple surveillance de fichiers si vous ne possédez pas LiveReload garantit également que, lors de l'exécution du serveur, toute modification apportée aux fichiers de l'application rechargera automatiquement le navigateur avec les nouvelles modifications. Par défaut, le port sur lequel il sera exécuté est 3051. En exécutant ce qui suit…
# Exécuter ceci pour la version non construite du serveur yeoman # Ou ceci pour la version construite du serveur yeoman: dist
Une nouvelle fenêtre de navigateur s'ouvrira avec votre application en cours d'exécution. Le serveur compilera également les actifs Coffee et Sass et les placera dans un temp annuaire. Donc, vous n'avez pas à vous soucier de la compilation! Il existe plusieurs autres cibles de serveur; assurez-vous de les vérifier.
test yeoman Mocha est un framework de test unitaire populaire intégré à Yeoman. Lorsqu'un projet est échafaudé, un dossier de test avec une index.html Le fichier est créé avec Mocha et Chai pour les assertions. Il suffit de lancer:
test yeoman
Yeoman lancera ensuite Mocha contre PhantomJS, un navigateur Web sans tête qui tourne dans Node.js. Ensuite, vous pouvez ajouter de nouveaux tests dans le index.html fichier. Les tests unitaires peuvent grandement améliorer n'importe quelle application, et Yeoman rend le processus aussi simple que possible. Donc, il n'y a plus d'excuses! Vous pouvez également utiliser Jasmine, si vous préférez, en passant --jasmin test-cadre au yeoman init commander.
yeoman installerPour installer de nouvelles bibliothèques client dans votre application, Yeoman utilise une bibliothèque, appelée Bower, qui est développée par certaines personnes sur Twitter..
Bower est un gestionnaire de paquets pour le Web. Bower vous permet d'installer facilement des ressources telles que des images, CSS et JavaScript, et gère les dépendances à votre place..
Yeoman permet les commandes suivantes:
# Installer un ou plusieurs paquets délimités par un espace yeoman installer jquery # Désinstaller des objets yeoman désinstaller jquery # Mettre à jour des objets yeoman mettre à jour jquery # Installe le trait de soulignement également car le backbone en dépend spécifiquement basé sur un nom yeoman lookup mocha # Allez trouver des trucs basés sur un mot-clé yeoman lookup underscore
Bower est un excellent ajout à Yeoman et résout le problème de flux de travail lié à la nécessité de récupérer en permanence des bibliothèques lors de la création d'applications. Cela garantit également qu'ils sont à jour. Voici un exemple d'utilisation de Bower.
bower installer jquery bower installer git: //github.com/maccman/package-jquery.git bower installer http://code.jquery.com/jquery-1.7.2.js bower installer ./repos/jquery
Les applications installées avec bower seront stockées dans un composant.json fichier à la racine de l'application.
Créons une application simple Backbone du début à la fin.
# Créer une nouvelle application backbone yeoman init # Créer un nouveau modèle et une collection backbone yeoman init: modèle photo Backbone yeoman init: collection de photos # Créer quelques nouvelles vues pour les photos publiques flickr. WAVES MAIN ET AJOUTE BEAUCOUP DE CODE # https://github.com/jcreamer898/yeomanbbapp yeoman server # Construisez TOUT CE QUE VOUS FAITES! yeoman build # Découvrez le nouveau build man… yeoman server: dist
Wow, c'est presque trop simple - et n'oubliez pas que vous pouvez créer des alias Bash pour raccourcir davantage ce code. Le plus difficile a été de créer l'exemple d'application! Mais c'est la beauté de la chose. Yeoman vous emmène loin de
le code passe-partout, et vous permet de vous concentrer exclusivement sur les choses difficiles!
Si vous le souhaitez, jetez un coup d'œil à l'application pour voir comment les choses se sont passées. Je dirais plutôt bien.
Yeoman peut accélérer rapidement le processus de développement d'une nouvelle application. Plutôt que de perdre votre temps à rassembler des bibliothèques et à écrire du code standard, tapez plutôt quelques commandes et vous serez opérationnel! Mieux encore, il est open source et écrit par deux personnes que vous connaissez peut-être!
Prendre plaisir!
