Création d'applications avec le workflow Yeoman

Qu'est-ce que Yeoman??

Question piège. Ce n'est pas une chose. C'est ce mec:


En gros, il porte un haut-de-forme, habite votre ordinateur et attend que vous lui disiez le type d'application que vous souhaitez créer. Par exemple, l’échafaudage d’une application Web ressemblerait à ceci:


La première chose qui me vient à l’esprit, c’est OMG si rêveur. Deuxièmement, merci, petit frère.

Tout ce que nous faisions était de lui dire ce que nous voulions et il a répondu avec des questions spécifiques pour nous donner encore plus de contrôle.

Revenons un pas en arrière, cependant. Tous les nouveaux ordinateurs ne sont pas livrés avec un Yeoman pré-installé. Il habite dans le référentiel de packages NPM. Il suffit de le demander une fois, puis il fait ses bagages et passe dans votre disque dur.. Assurez-vous de nettoyer, il aime les choses nouvelles et brillantes.

C'est une personne qui a des sentiments et des opinions, mais il est très facile de travailler avec. Si vous pensez qu'il a trop d'opinion, il peut être facilement convaincu.

Prenons une seconde pour séparer ce que cela yo webapp commande, de la capture d'écran précédente a vraiment.

yo

Il s’agit d’une commande globale conviviale pour OS X, Linux et Windows qui balaye votre disque dur à la recherche de «générateurs» installés, puis leur donne le contrôle en fonction du prochain argument:

Webapp

Ceci est en fait un plug-in séparé, ou "générateur", appelé générateur-webapp. Yeoman reconnaît d'autres Générateur-____ Les modules de nœuds, qui ouvrent la porte à l'utilisation de Backbone, AngularJS et d'innombrables autres générateurs You-Name-it.

Quelque chose d’important à retenir, c’est la générateur-webapp module qui nous invite avec des questions. Il en va de même pour tous les autres générateurs que nous installons. Ils sont entretenus par la communauté, pas nécessairement par les membres de l'équipe Yeoman..

En utilisant Yeoman, vous ne dites pas "Je veux faire les choses à votre façon, maître. arc arc,"Sans aucun contrôle. En réalité, c'est tout le contraire. Ce que vous dites, c'est:" Je souhaite créer une application qui respecte les meilleures pratiques découvertes par les utilisateurs fréquents et les contributeurs de la communauté du développement Web. "

Sérieusement, il faut le dire comme ça, ou ça ne marchera pas.

Si vous préférez faire autre chose que ce qu’il vous a donné, il vous suffit de modifier le code qui a été généré pour vous ou même d’aller à la source du "générateur" lui-même et d’envoyer votre contribution..


Relation amicale

Notre copain, yo a des copains à lui, et pense que vous vous entendrez tous pour un thé sans fin et des sourires. Si vous n'avez pas entendu parler de Grunt ou de Bower, voici un bref résumé de ce qu'ils nous donnent:

Grognement

Grunt est un coureur de tâches basé sur JavaScript, qui fait le sale boulot. Comme yo, il fournit également un ensemble de fonctionnalités de base, puis permet à la communauté de partager ses propres plug-ins, ou "tâches" permettant de réaliser des tâches courantes. Lorsque vous échafaudez votre application avec yo webapp, Des tâches fastidieuses et triées sur le volet vont suivre, comme la gestion de votre site Web dans un environnement de développement local, la concaténation et la réduction de votre code, l'optimisation de vos images, etc. Les tâches sont exécutées via la ligne de commande, en tapant serveur grunt, grunt construction, test de grunt, et beaucoup plus.

Les tâches sont définies et personnalisées dans un Gruntfile.js fichier, qui réside dans le répertoire racine de votre projet. Allez voir ce que Yeoman a mis en place pour vous.

Tonnelle

Personne n'aime aller sur GitHub ou sur des sites de développeurs aléatoires pour télécharger le fichier .zip d'un outil JavaScript. Comme lors de la récupération d'un package de nœud avec npm install ___, Bower vous laisse dire bower installer ___. Le composant est ensuite enregistré dans un répertoire de votre choix, généralement, app / bower_components / pour les applications générées par Yeoman. En supposant que vous vouliez jQuery, vous exécuteriez le requête d'installation bower commande, puis incluez le fichier correspondant dans votre fichier HTML. Dans notre cas,


Une application typique

Soyons sauvages. Il est temps de créer une application.

Très vite cependant, trouvez votre terminal le plus proche et assurez-vous d'avoir yo installé globalement:

$ npm install -g yo

Pour générer une application Web, vous aurez également besoin de générateur-webapp:

$ npm install -g generateur-webapp

Créez un dossier dans lequel vous pouvez jouer, puis exécutez:

$ yo webapp

Voici ce qui aurait dû se passer:

  • Un buncha stuff.

L'a fait? Bien!

Pour vous empêcher de faire défiler tout le texte que vous venez de cracher, voici un aperçu:


La nouvelle application Web a été échafaudée et vos composants Bower et vos packages NPM ont été installés automatiquement..

Ouvrez toutes ces nouveautés dans votre éditeur préféré, et nous examinerons ce que nous avons.

 ├─ app / ├─ images / ly glyphicons-halflings.png glyphicons-halflings-white.png par les scripts / │ ├─ vendor / │ │ bootstrap.js App.js │ ├─ hello.coffee │ main.js styles / │ └─ main.css .htaccess 404.html par favicon.ico ├ ─ index.html └─ ├─ robots.txt node_modules / ├─ ├─ so / many / │ └─ packages / │ test / spec / │ │ └─ test.js │ .bowerrc de bower.json de index.html de .bowerrc de .editorconfig de .gitattributes de .gitignore de .jshintrc de bower.json de Gruntfile.js de package.json

Si vous retirez quelque chose de cet article, laissez-le être la belle représentation textuelle de fichier / dossier ci-dessus. Cela a juste pris une montagne entière de mon temps.

De retour sur la bonne voie. Qu'est-ce que vous regardez est la structure d'application la plus commune qu'un générateur Yeoman va produire.

  • app / est l'endroit où vit votre code source pur, non compilé, non minifié.
  • app / scripts / est où votre JavaScript va. Vous êtes libre de créer des sous-répertoires et même d'utiliser CoffeeScript si c'est votre tasse de thé. Cela n'avait aucun sens. Encore. Vous êtes libre d'utiliser TeaScript si c'est votre tasse de café. Nan.
  • app / styles / est l'endroit où va votre CSS. Encore une fois, les sous-répertoires, LESS, Sass, whatevs.
  • app / index.html est la version non-minifiée de index.html qui seront éventuellement écrasés et livrés au client. Plus sur cela plus tard.
  • Gruntfile.js a toutes les tâches de construction, de serveur et de test définies.

À ce point, yo a fait son travail. Il vous a fourni tout ce dont vous avez besoin pour lancer une application Web prête pour la production. Nous allons maintenant nous concentrer sur les tâches Grunt qu'il a préconfigurées pour nous..

grunt construction

Fonctionnement grunt construction prend votre app / fichiers de code source et les transforme en une application distribuable, qui se termine en dist /.

Cette dist / le dossier est ce que vous alimentez votre serveur. dist / aura le sien index.html, avec des références à minifiées et concaténées dist / scripts et dist / styles, et optimisé dist / images. Vos utilisateurs apprécieront cela. Votre carte de téléphone, les utilisateurs distants seront vraiment apprécie ça.

Dans les coulisses, grunt construction est une tâche qui exécute plusieurs sous-tâches. L'un d'entre eux est grunt-usemin, qui cherche des blocs à l'intérieur de votre app / index.html, comme ça:

app / index.html

    

Après votre grunt construction tâche terminée, vous allez vous retrouver avec ceci:

dist / index.html

 

Il a aspiré ces scripts, les a concaténés, minifiés et même les a précédés d'un hachage unique afin d'empêcher les navigateurs de mettre en cache des versions obsolètes. Assez puissant.

C'est l'une des caractéristiques les plus brillantes de l'utilisation de Yeoman. Au lieu de définir manuellement ce que vous voulez que votre processus de construction fasse chaque fois que vous créez une application, vous pouvez simplement faire confiance à Yo et au générateur que vous avez choisi. Ensemble, ils vous connecteront à tout ce dont vous avez besoin pour lancer une application prête pour la production..

serveur grunt

Maintenant que vous avez vu quel type de travail grunt construction fera quand votre application est complète, vous devriez probablement commencer à travailler sur votre application! Nous en créerons un en une seconde, mais voyons d’abord quel type de workflow nous aurons. Comme grunt construction, serveur grunt utilise plusieurs autres tâches Grunt pour rendre le développement aussi simple que possible.

Essaye le:


Les "plusieurs autres tâches Grunt" susmentionnées sont:

  • nettoyer: Yeoman stocke des trucs dans un .tmp dossier. Qui sera anéanti.
  • café: Compile vos fichiers CoffeeScript à partir de app / scripts.
  • boussole: Compile vos fichiers Sass à partir de app / styles.
  • relier: Crée un serveur local, surveille les modifications apportées à vos fichiers source, puis déclenche un rechargement dans votre navigateur.
  • ouvrir: Ouvre l'instance du serveur, généralement localhost: 9000 dans votre navigateur.

Effectuez une ou deux modifications dans les fichiers source pour que les modifications soient reflétées dans le navigateur. Comme je l’ai dit plus haut, c’est aussi simple que cela. Ça fonctionne.


Appetons-le!

J'entendais bien sûr les apéritifs. Prenez quelques bâtons de fromage, puis retrouvez-moi un peu.

Lave t'es mains!


Créons une application

Pour avoir une idée de certains autres générateurs Yeoman, essayons Backbone. Nous allons créer une application simple à faire, utiliser Bower pour nos dépendances et vous présenter un flux de travail réel avec Yeoman..

$ Ça sonne bien? (Y / n)

Je suppose que vous avez entré "Y". Nous conduisons! Mais d'abord:

 # installe le générateur Backbone: $ npm install -g générateur-backbone # crée un autre répertoire de lecture, puis fait les choses suivantes: $ yo backbone _ ----- _ | | | - (o) - | .--------------------------. '---------' | Bienvenue chez Yeoman, | (_'U'_) | Mesdames et Messieurs! | / ___ A ___ \ '__________________________' | ~ | __'.___.'__ "| ° 'Y' A la livraison, j'inclus HTML5 Boilerplate, jQuery, Backbone.js et Modernizr. Souhaitez-vous inclure Twitter Bootstrap for Sass? (Oui / non) Oui inclure RequireJS (pour le support AMD)? (o / N) Non

Ouvrez la nouvelle application dans votre éditeur. Les choses devraient se sentir assez familières après notre expérience avec le générateur d’applications Web. Tu as encore un app répertoire, avec scripts /, modes/ Et un index.html.

Avant de commencer à éditer des fichiers, lancez:

serveur grunt

Comme nous en avons parlé plus tôt, cela démarre le serveur, met en place des surveillances sur nos fichiers, bla bla yipsie-doodle. Votre navigateur devrait s'ouvrir et vous devriez être accueilli avec:

«Allo», Allo!

Eh bien, on doit garder ça. C'est tellement gentil. Cependant, effaçons les autres choses.

index.html

 

«Allo», Allo!

Lorsque vous enregistrez, votre navigateur s'actualise et nous l'avons! Juste un simple et chaleureux "'Allo,' Allo".

Préparons-nous un plan de match. Nous savons que nous allons créer une application To Do, mais à quoi cela pourrait-il ressembler? Aurons-nous besoin d'autres bibliothèques pour nous aider?

Hmm.

Cela fait au moins 4 secondes et je n'ai entendu aucune réponse..

Bon, je vais prendre une autre rosée après que cet arbre ait bu mon dernier. Je vous ferai savoir si je pense à quelque chose.


À faire: Configurer notre structure de fichier

B3. Une fente terrible dans un distributeur automatique pour une boisson gazeuse. Fizz, mousse, désastre.

Pendant que je me lavais les mains dans la salle de bain, j'ai eu une vision.

 [Ajouter une nouvelle tâche] ← case à cocher - cliquer permet de tracer une ligne à travers le titre de la tâche [x] Tâche n ° 1 [] Tâche n ° 2 ↑ titre - un double clic déclenchera une modification "mode

Ou…


Mettons nous en place avec une structure qui donnera vie à cette vision.

générateur-backbone est venu avec des armes secrètes: sous-générateurs. votre colonne vertébrale échafaudé notre application, mais revenez à votre terminal et voyez ce que ces gars-là peuvent faire:


Vérifiez votre index.html:

        

Comment ça! Il n'a pas seulement créé et placé des fichiers dans des répertoires pertinents, il les a même inclus dans votre code HTML pour vous..

J'ai créé un référentiel pour notre application To Do - allez y faire un tour. Nous allons jeter un coup d’œil aux fichiers ensemble, mais veuillez vous reporter au référentiel pour obtenir le code complet..

scripts / main.js

 / * global backboneApp, $ * / window.backboneApp = Modèles: , Collections: , Vues: , Routeurs: , init: function () new this.Views.TodosView (collection: new this.Collections.TodosCollection ()); ; $ (document) .ready (function () backboneApp.init (););

Pensées

Le générateur Backbone met en place certaines bonnes pratiques que vous pouvez utiliser immédiatement. Il a pris le nom de votre répertoire, dans mon cas "backboneApp", et a exposé un littéral d'objet pour contenir les modèles, les collections et d'autres objets Backbone que nous pouvons créer..

Le générateur intègre également JSHint dans le processus de création de votre application, afin de vous assurer que votre code est de la qualité la plus élevée et la plus cohérente qui soit. Nous vous encourageons à personnaliser vos préférences dans le .jshintrc fichier à la racine du répertoire de votre projet.

finalement, $ (document) .ready appellera backboneApp.init, qui crée un TodosCollection, puis le passe dans un TodosView. Je reviendrai sur ceux-ci plus en détail bientôt.

scripts / collections / todos-collection.js

 / * backboneApp global, Backbone * / backboneApp.Collections.TodosCollection = Backbone.Collection.extend (localStorage: new Backbone.LocalStorage ('backbone-generator-todos'), initialize: function () this.model = backboneApp.Models .TodoModel;);

Pensées

Si nous voulons que notre application To Do soit un peu utilisable, nous devons stocker nos articles To Do quelque part. Il existe un adaptateur pratique Backbone que vous connaissez peut-être, appelé Backbone.LocalStorage. Il interceptera les appels de Backbone vers le backend distant par défaut et utilisera votre navigateur. window.localStorage au lieu.

Nous savons que nous aurons besoin de l'adaptateur Backbone.LocalStorage, mais où devrions-nous nous en procurer? Idée! Idée!

Nous n'avons pas beaucoup utilisé Bower directement. Lorsque notre application a été échafaudée, Bower a été utilisé dans les coulisses pour saisir Modernizr, Twitter Bootstrap, jQuery, Underscore et Backbone. Mais, si nous voulons ajouter dans une autre dépendance JavaScript?

Retournez à votre terminal préféré et essayez ceci:

colonne vertébrale de recherche $ bower

Ok, wow. C'est beaucoup. Peut-être devrions-nous préciser cela.

 $ bower search backbone.localstorage Résultats de la recherche: backbone.localStorage git: //github.com/jeromegn/Backbone.localStorage.git

Nous y voilà. Il ne reste plus qu'à l'installer.

 $ bower installez backbone.localStorage --save bower cloning git: //github.com/jeromegn/Backbone.localStorage.git bower mis en cache git: //github.com/jeromegn/Backbone.localStorage.git bower cherchant backbone.localStorageGower vérifiant backbone.localStorage # v1.1.4 bower installation de backbone.localStorage # v1.1.4

Lorsque vous travaillez avec plusieurs développeurs, il peut être gênant de s'assurer que tout le monde a les bonnes dépendances et les versions correspondantes. En utilisant --enregistrer ci-dessus, nous disons à Bower de se souvenir de cette nouvelle dépendance, puis écrivons à ce sujet dans notre bower.json fichier. Lorsqu'un autre développeur clone votre projet, il ne reste plus qu'à exécuter bower installer pour télécharger toutes les dépendances, en gardant tout le monde synchronisé. C'est pourquoi app / bower_components est répertorié dans votre .gitignore fichier. Le temps des dépôts gonflés est révolu!

Maintenant que Bower a génial partout dans notre application, aller dans app / index.html et mettre à jour le scripts / vendor.js bloc de commentaires:

      

Lorsque vous enregistrez le fichier, votre navigateur s'actualise et la nouvelle bibliothèque est prête à être utilisée. Plus précisement, TodosCollection l'aura prêt à utiliser.

scripts / collections / todo-model.js

 / * global backboneApp, Backbone * / backboneApp.Models.TodoModel = Backbone.Model.extend (valeurs par défaut: titre: ", terminé: false, bascule: fonction () this.save (complete:! this.get ('terminé') );  );

Pensées

C'est un joli modèle de base de Backbone. Nous définissons des propriétés par défaut pour nos tâches et définissons une basculer fonction, simplement utilisée pour basculer entre un état "Complet" ou "Incomplet".

scripts / views / todos-view.js

 / * global backboneApp, Backbone, JST * / backboneApp.Views.TodosView = Backbone.View.extend (el: '# todo-app', modèle: JST ['app / scripts / templates / todos.ejs']], événements : / *… * /, Initialiser: fonction () / *… * /, rendre: fonction () / *… * /, createTodo: fonction () / *… * /, addTodoItem: function () / *… * /, addAllTodoItems: function () / *… * /);

Pensées

Il s’agit de notre vue Backbone la plus robuste. Pour voir les définitions de ces différentes propriétés et méthodes, veuillez vous reporter au référentiel..

Cependant, voici quelques éléments clés:

 el: '# todo-app'

Ce sélecteur correspond à celui

élément que nous avons créé dans notre index.html fichier. Ce sera notre vue principale.

 modèle: JST ['app / scripts / templates / todos.ejs']

Cette petite chose JST s'est faufilé quand nous avons dit votre colonne vertébrale: voir ____. Lorsque le fichier JavaScript de notre View a été créé, le sous-générateur Backbone a créé un fichier modèle correspondant pour nous: app / scripts / templates / todos.ejs.

Celles-ci .ejs Les fichiers modèles définiront le code HTML de nos vues. Quand on lance notre application avec serveur grunt ou grunt construction, nos fichiers de modèle seront écrasés ensemble dans un objet JavaScript, JST. Quand notre fichier de vue dit template: JST ['path / to / view / template.ejs'], cela fait référence à cet objet.

scripts / templates / todos.ejs

 

Pensées

Parce que nous avons répondu «Oui» à l'inclusion de Twitter Bootstrap for Sass lors de l'échafaudage de notre application, j'ai ajouté quelques noms de classe pour améliorer notre application. Ne hésitez pas à style au contenu de votre coeur dans le styles / main.scss fichier.

styles / main.scss

 @import 'sass-bootstrap / lib / bootstrap'; .hero-unit margin: 50px auto 0 auto; largeur: 300px;  form margin-top: 10px;  ul, li forme margin: 0; rembourrage: 0;  ul list-style: none;  li forme display: none;  .editing span display: none;  form display: inline-block;  input: vérifié ~ span text-decoration: line-through; 

Pensées

Sass est plutôt cool.

De plus, c’est vraiment bien que le navigateur se recharge quand vous modifiez vos fichiers Sass. Si vous avez déjà utilisé Sass, vous savez que mettre en place rapidement un environnement de développement productif peut s'avérer fastidieux. Hors de la boîte Yeoman, vous éditez, regardez et rechargez sans aucun des problèmes susmentionnés. Smiley.

scripts / views / todo-view.js

 / * global backboneApp, Backbone, JST * / backboneApp.Views.TodoView = Backbone.View.extend (tagName: 'li', modèle: JST ['app / scripts / templates / todo.ejs'], événements: ' cliquez sur l'entrée [type = "case à cocher"] ':' bascule ',' dblclick span ':' toggleEdit ',' formulaire de soumission ':' toggleEdit ', initialiser: fonction () / *… * /, rendu: fonction () / *… * /, Bascule: fonction () / *… * /, basculeEdit: fonction () / *… * /);

Pensées

Ce TodoView représentera un élément individuel. Ce sera un

  • avec certaines fonctionnalités personnalisées gérant les événements click, double click et submit, permettant à un utilisateur de modifier et d'enregistrer une tâche.

    scripts / templates / todo.ejs

     vérifié<%  %>> 
    <%= title %>

    Pensées

    Assez simple. Nous utilisons des modèles de base Underscore pour cracher des valeurs et basculer un vérifié indiquer sur notre case à cocher.


    À faire: recommencez

    Notre application à faire est réellement faite! La fonctionnalité est assez basique, mais vous devriez avoir une idée du naturel de développer une application utilisant Yeoman et ses copains de Generator. Et même si la fonctionnalité est basique, aucune des techniques que nous utilisions pour arriver ici n’était "basique". Nous utilisons des bibliothèques intelligentes et efficaces (Sass, Backbone, Underscore) avec un processus de développement ajusté (Grunt, LiveReload, Compass), et cela ne nous a pris que quelques commandes de terminal..

    Si vous êtes comme moi, vous voudrez probablement vous arrêter avec les tâches à faire et commencer à créer vos propres applications. Si vous voulez jouer, allez-y! Lorsque vous avez fini de générer comme un fou, revenez et expédions notre application Tâches.


    À faire: l'expédier

    Mettons cette chose dans l'eau et voyons si elle flotte! Ne mettez PAS votre ordinateur dans l’eau. Attendez, un MacBook Air flotterait-il? Non, probablement pas. Hmm…

    C'était un paragraphe dangereux. Préparons simplement notre application pour la production, en toute sécurité et au sec.

    serveur grunt a été incroyable, mais il est temps de rencontrer son frère, grunt construction. Nous en avons parlé un peu plus tôt, mais revenons un peu plus en détail..

    Voici ce que le grunt construction tâche est définie comme dans votre Gruntfile.js:

     grunt.registerTask ('build', ['clean: dist', // Efface vos dossiers .tmp / et dist / dossiers 'coffee', // Compile vos fichiers CoffeeScript (le cas échéant) 'createDefaultTemplate', // Crée un JS fichier qui configure votre objet JST 'jst', // compile votre 'scripts / templates /' fichiers 'compass: dist', // compile votre Sassiness 'useminPrepare', // recherche ceux-ci  dans votre 'imagemin' HTML, // optimise vos images! 'htmlmin', // Minifie la concat 'de vos fichiers HTML, // Tâche utilisée pour concaténer votre JS et CSS' cssmin ', // Minifie vos fichiers CSS' uglify ', // Tâche utilisée pour minifier votre' JS copie '', // Copie les fichiers de .tmp / et app / dans dist / 'rev', // Crée des hachages uniques et renomme vos nouveaux fichiers JS / CSS 'usemin' // Met à jour les références dans votre code HTML avec les nouveaux fichiers]) ;

    Donc, cette chose est assez légitime. Toutes ces tâches sont définies à l'intérieur de Gruntfile.js, alors n'hésitez pas à fouiller et à peaufiner pour personnaliser la construction de votre application. Il est fort probable que vous n’ayez besoin de faire aucune personnalisation, mais c’est là si vous devez.

    Oh, une autre chose. grunt construction est effectivement enveloppé à l'intérieur d'une autre tâche.

    grognement

    Simplement en cours d'exécution grognement va exécuter le défaut tâche:

     grunt.registerTask ('default', ['jshint', 'test', 'build']);

    Ces deux premières tâches, jshint et tester sont faciles à négliger lorsque vous dépêchez une application, mais sont très importants.

    JSHint

    le jshint tâche consultera votre .jshintrc fichier pour connaître vos préférences, puis parcourez tous vos fichiers JS pour vous assurer que vos règles sont respectées. Pour obtenir une description complète de vos options avec JSHint, consultez la documentation de JSHint..

    Tester

    le tester tâche ressemble à ceci:

     grunt.registerTask ('test', ['clean: serveur', 'café', 'createDefaultTemplate', 'jst', 'compass', 'connect: test', 'mocha']);

    En gros, cela suffit pour créer et servir votre application pour votre framework de test, Mocha, pour exécuter vos tests..

    Oh merde, des tests.

    À côté de votre app / et dist / annuaires, ce petit tester/ buckaroo attend notre attention. Aww.

    Si vous ouvrez cela, vous verrez tester/ a sa propre bower.json et index.html, ainsi qu'une spec / annuaire. Vos tests auront des dépendances qui leur sont propres, la Chai Assertion Library et le framework de test Mocha..

    Développer ça spec / répertoire et vous verrez un test.js fichier qui ressemble à ceci:

     / * global décrivent, il * / 'use strict'; (function () decrire ('Donne du contexte', function () decrire ('peut-être un peu plus de contexte ici', function () it ('devrait exécuter ici quelques assertions', function () ); ););) ();

    Ok, on pourrait utiliser une requête de tirage pour corriger une grammaire. N'importe qui?

    Si vous n'avez pas encore écrit vos propres tests, vous verrez des termes tels que décrire, il, avant, avant chaque, après, et après chaque apparaitre. décrire est un wrapper pour un groupe de tests liés, ____Chaque sont des fonctions optionnelles qui s'exécuteront avant ou après vos test (s), et chacun il est un test spécifique.

    Essayez de lancer un test de grunt pour voir toute la magie se dévoiler.


    Vous devriez jouer et voir si vous pouvez écrire des tests pour notre application To Do. Quelques idées de cas de test pourraient être:

    • La création d'une nouvelle tâche est-elle enregistrée dans LocalStorage??
    • Est-ce que le titre d'une nouvelle tâche est tronqué (en supprimant les espaces supplémentaires)??
    • Lorsque vous modifiez une tâche, la suppression du titre, puis la suppression suppriment la tâche de localStorage.?

    Il n'y a plus qu'une chose à faire.

    appuyez sur Entrée

    $ grunt

    Vous devriez voir nos mots préférés: Fait, sans erreur.


    Trouver yeoman

    Yeoman est encore assez jeune. il vient d'en tourner un! Les choses vont plutôt bien maintenant et elles ne feront que s'améliorer. Cependant, comme tous les enfants d'un an, Yeoman apprend toujours à marcher sans tomber et à parler sans baver. Vous pourriez juste rencontrer un bogue ou deux. Dans des moments comme ceux-là, pensez à lui comme à votre mignon petit neveu. Il a besoin de modèles positifs dans sa vie, alors aidez-le à apprendre!

    Cela devenait un vrai livre pour enfants, très vite. Je vais grandir un peu: il y a des bugs et nous avons besoin de votre aide pour les écarter (j'ai dit "un peu"). Même si ce n'est pas un bogue, mais vous êtes comme: "Je connais un plug-in BEAUCOUP plus rapide que ce générateur pourrait utiliser", signalez-le au gestionnaire de suivi des problèmes du générateur approprié..

    Si vous voulez en savoir plus sur Yeoman ou tout simplement faire connaissance avec l'équipe, vous nous trouverez partout sur les sites suivants.

    • yeoman.io
    • Guide de Démarrage
    • @yeoman sur Twitter
    • +Yeoman sur Google+

    Si vous êtes simplement coincé, essayez l'une des ressources suivantes pour vous aider.

    • StackOverflow
    • #yeoman sur IRC

    Yeoman n'est qu'un élément de la pile: NPM, Node, Grunt et Bower. Cela peut être intimidant si vous ne les connaissez pas, mais il est essentiel de ne pas craindre la courbe! L'apprentissage devra se faire et, comme toujours, il faudra probablement que cela se passe à la dure avant que cela ne colle vraiment.

    Psst, si vous utilisez sudo avant chaque commande, lancez, ne marchez pas, vers Node et NPM en 30 secondes. Vous y trouverez plusieurs scripts que vous pouvez exécuter pour redonner le contrôle à votre compte utilisateur. Cela vous aidera également à installer Node et NPM si vous partez de zéro.


    Yo 'Next Application - Voulez-vous Yo?

    Comme tous les