Creazione di app con il flusso di lavoro Yeoman

Cos'è Yeoman?

Domanda a trabocchetto. Non è una cosa. È questo ragazzo:


Fondamentalmente, indossa un cappello a cilindro, vive nel tuo computer e aspetta che tu gli dica che tipo di applicazione desideri creare. Ad esempio, l'impalcatura di un'applicazione Web sarebbe simile a questa:


La prima cosa che viene in mente è OMG così sognante. Secondo, grazie, fratello.

Tutto quello che abbiamo fatto è stato dirgli quello che volevamo e lui ha risposto con domande specifiche per darci un controllo ancora maggiore.

Facciamo un passo indietro, però. Non tutti i nuovi computer sono dotati di un Yeoman preinstallato. Vive nel repository del pacchetto NPM. Devi solo chiederglielo una volta, poi si impacchetta e si sposta nel tuo disco fisso. Assicurati di ripulire, gli piacciono le cose nuove e brillanti.

È una persona con sentimenti e opinioni, ma è molto facile lavorare con lui. Se pensi che sia troppo supponente, si può facilmente convincere.

Prendiamoci un secondo per rompere a pezzi cosa la tua webapp comando, dallo screenshot precedente ha davvero fatto.

yo

Si tratta di un comando a livello di sistema compatibile con OS X, Linux e Windows che esegue la scansione del disco rigido per qualsiasi "generatore" installato, quindi fornisce loro il controllo basato sull'argomento successivo:

webapp

Questo è in realtà un plug-in separato, o "generatore", chiamato generatore-webapp. Yeoman riconosce gli altri Generatore-____ Moduli di nodi, che apre la porta all'utilizzo di Backbone, AngularJS e innumerevoli altri generatori di nome utente.

Qualcosa di importante da togliere a questo è, è il generatore-webapp modulo che ci spinge con domande. Lo stesso vale per qualsiasi altro generatore che installiamo. Sono gestiti dalla comunità, non necessariamente dagli stessi membri del team Yeoman.

Usando Yeoman, non stai dicendo "Voglio fare le cose a modo tuo, maestro. arco arco,"senza alcun controllo, in realtà è esattamente l'opposto." Quello che stai dicendo è "Voglio fare un'applicazione che segua le best practice che sono state scoperte da utenti frequenti e collaboratori della comunità di sviluppo web".

Seriamente, devi dirlo in questo modo, altrimenti non funzionerà.

Se preferisci fare qualcosa di diverso da quello che ti dà, devi semplicemente cambiare il codice che è stato generato per te, o anche andare alla fonte del "generatore" stesso, e inviare il tuo contributo.


Amicizia

Il nostro amico, ha alcuni amici suoi e pensa che andrete tutti d'accordo con tè e sorrisi infiniti. Se non hai sentito parlare di Grunt o Bower, ecco un breve riassunto di ciò che questi ci danno:

Grugnito

Grunt è un task runner basato su JavaScript, che fa le cose sporche. Piace yo, fornisce inoltre una serie di funzionalità di base, quindi consente alla comunità di condividere i propri plug-in, o "attività" che aiutano a realizzare cose comuni. Quando impalcati la tua applicazione con la tua webapp, Arriveranno anche grugniti e alcuni compiti scelti a mano, che realizzano cose come la gestione del sito web in un ambiente di sviluppo locale, la concatenazione e la minimizzazione del codice, l'ottimizzazione delle immagini e molto altro ancora. Le attività vengono eseguite tramite la riga di comando, digitando server grunt, build grunt, test da grugnito, e tanti altri.

Le attività sono definite e personalizzate in a Gruntfile.js file, che risiede nella directory principale del tuo progetto. Guardalo per vedere cosa ti ha preparato Yeoman.

pergolato

A nessuno piace andare su GitHub o sui siti di sviluppatori casuali per scaricare un .zip di uno strumento JavaScript. Come quando si preleva un pacchetto Node con npm install ___, Bower ti fa dire bower install ___. Il componente viene quindi salvato in una directory di tua scelta, generalmente, app / bower_components / per le app generate da Yeoman. Supponendo che tu voglia jQuery, eseguiresti il domanda di installazione di bower comando, quindi includi il file pertinente all'interno del tuo file HTML. Nel nostro caso,


Un'applicazione tipica

Divertiamoci. È tempo di creare un'app.

Molto veloce, trova il terminale più vicino e assicurati di averlo yo installato globalmente:

$ npm install -g yo

Per generare un'app Web, avrai anche bisogno generatore-webapp:

$ npm install -g generator-webapp

Crea una cartella in cui possiamo giocare, quindi esegui:

$ yo webapp

Ecco cosa dovrebbe essere successo:

  • Un'intera roba da buncha.

Fatto? Buono!

Per impedirti di scorrere su tutto il testo che ti è stato appena sputato, ecco una panoramica:


La nuova applicazione Web è stata impalcata e i componenti Bower e NPM sono stati installati automaticamente.

Apri tutte queste novità nel tuo editor preferito e guarderemo cosa abbiamo.

 ├─ app / │ ├─ images / │ │ ├─ glyphicons-halflings.png │ │ └─ glyphicons-halflings-white.png │ ├─ copioni / │ │ ├─ vendor / │ │ │ └─ bootstrap.js │ │ ├─ app.js │ │ ├─ hello.coffee │ │ └─ main.js │ ├─ stili / │ │ └─ main.css │ ├─ .htaccess │ ├─ 404.html │ ├─ favicon.ico │ ├ ─ index.html │ └─ robots.txt │ ├─ node_modules / │ ├─ so / │ ├─ molti / │ └─ pacchetti / │ ├─ test / │ ├─ spec / │ │ └─ test.js │ ├─ .bowerrc │ ├─ bower.json │ └─ index.html │ ├─ .bowerrc ├─ .editorconfig ├─ .gitattributes ├─ .gitignore ├─ .jshintrc ├─ bower.json ├─ Gruntfile.js └─ package.json

Se togli qualcosa da questo articolo, lascia che sia la bellissima rappresentazione del testo file / cartella sopra. Mi è bastato un intero Mountain Dew del mio tempo.

Di nuovo in pista. Quello che stai guardando è la struttura applicativa più comune prodotta da un generatore Yeoman.

  • app / è dove vive il tuo codice sorgente puro, non compilato, non minified.
  • app / scripts / è dove va il tuo JavaScript. Sei libero di creare sottodirectory e persino usare CoffeeScript se è la tua tazza di tè. Non aveva senso. Ancora. Sei libero di usare TeaScript se è la tua tazza di caffè. no.
  • app / stili / è dove va il tuo CSS. Di nuovo, sottodirectory, LESS, Sass, whatevs.
  • app / index.html è la versione non minificata di index.html che alla fine verrà schiacciato e consegnato al cliente. Maggiori informazioni in seguito.
  • Gruntfile.js ha definito tutte le attività di build, server e test.

A questo punto, yo ha fatto il suo lavoro Ti ha dato tutto il necessario per avviare un'applicazione web pronta per la produzione. Spostiamo ora l'attenzione su quali compiti di Grunt è preconfigurato per noi.

build grunt

In esecuzione build grunt prende il tuo app / file di codice sorgente e li trasforma in un'applicazione distribuibile, che finisce nel dist /.

Quello dist / la cartella è ciò che si alimenta al tuo server. dist / avrà il suo index.html, con riferimenti a minati e concatenati dist / scripts e dist / stili, e ottimizzato dist / immagini. I tuoi utenti apprezzeranno questo. La tua scheda telefonica, gli utenti dial-up lo faranno veramente lo apprezzo.

Dietro le quinte, build grunt è un'attività che esegue diverse sotto-attività. Uno di questi è grugnito-usemin, che cerca blocchi all'interno del tuo app / index.html, come questo:

app / index.html

    

Dopo il tuo build grunt l'attività è completata, si finirà con questo:

dist / index.html

 

Ha risucchiato quegli script, li ha concatenati, ridotti al minimo e li ha anche preceduti da hash univoci per impedire ai browser di memorizzare nella cache versioni obsolete. Abbastanza potente.

Questa è una delle migliori caratteristiche dell'uso di Yeoman. Invece di definire manualmente ciò che vuoi che il tuo processo di compilazione faccia ogni volta che crei un'applicazione, puoi semplicemente fidarti di Yo e del generatore scelto. Insieme, ti collegheranno con tutto il necessario per avviare un'applicazione pronta per la produzione.

server grunt

Ora che hai visto che tipo di lavoro build grunt farà quando la tua applicazione sarà completa, probabilmente dovresti iniziare a lavorare sulla tua applicazione! Ne creeremo uno in appena un secondo, ma prima vediamo quale tipo di flusso di lavoro avremo. Piace build grunt, server grunt usa diversi altri compiti di Grunt per rendere lo sviluppo il più semplice possibile.

Provalo:


I suddetti "numerosi altri compiti Grunt" sono:

  • pulito: Yeoman immagazzina alcune cose in a .tmp cartella. Questo sarà spazzato via.
  • caffè: Compila i tuoi file CoffeeScript da app / scripts.
  • bussola: Compila i tuoi file Sass da app / stili.
  • Collegare: Crea un server locale, controlla le modifiche ai file sorgente, quindi attiva la ricarica nel browser.
  • Aperto: Apre l'istanza del server, in genere localhost: 9000 nel tuo browser.

Fai una modifica o due nei file sorgente per vedere la modifica riflessa nel browser. Come ho detto sopra, questo è facile come può essere. Funziona e basta.


Facciamo App It Up!

Ovviamente intendevo gli antipasti. Prendi dei bastoncini di formaggio, poi incontrami un po '.

Lavati le mani!


Creiamo un'applicazione

Per avere un'idea di altri generatori Yeoman, proviamo Backbone. Creeremo una semplice app To Do, useremo Bower per le nostre dipendenze e ti presenteremo a un flusso di lavoro reale con Yeoman.

$ Suona bene? (Y / n)

Immagino che tu abbia inserito "Y". Noi cavalchiamo! Ma prima:

 # installa il generatore Backbone: $ npm install -g generatore-backbone # crea un'altra directory di riproduzione, quindi fai queste cose: $ yo backbone _ ----- _ | | | - (o) - | .--------------------------. '---------' | Benvenuto in Yeoman, | (_'U'_) | Signore e signori! | / ___ A ___ \ '__________________________' | ~ | __'.___.'__ "| ° 'Y' Out of the box includo HTML5 Boilerplate, jQuery, Backbone.js e Modernizr. Vuoi includere Twitter Bootstrap per Sass? (Sì / No) Sì Vorresti includere RequireJS (per il supporto AMD)? (y / N) No

Apri la nuova app nel tuo editor. Le cose dovrebbero sentirsi abbastanza familiari dopo la nostra esperienza con il generatore di app web. Hai ancora un App directory, con scripts /, stili / e un index.html.

Prima di iniziare a modificare i file, esegui:

$ grunt server

Come abbiamo detto prima, questo avvia il server, imposta gli orologi sui nostri file, blah blah yipsie-doodle. Il tuo browser dovrebbe aprirsi e dovresti essere accolto con:

'Allo,' Allo!

Bene, spara, dobbiamo tenerlo. È così carino Tuttavia, chiariamo le altre cose.

index.html

 

'Allo,' Allo!

Quando salvi, il tuo browser si aggiornerà e ce l'abbiamo! Solo un semplice, caldo "'Allo,' Allo".

Prendiamoci un piano di gioco. Sappiamo che creeremo un'applicazione To Do, ma come potrebbe essere? Avremo bisogno di altre librerie per aiutarci?

Hmm.

Sono passati almeno 4 secondi e non ho ancora ricevuto risposte.

Bene, prenderò un altro Rugiada dopo che l'albero dei file ha bevuto il mio ultimo. Ti farò sapere se penso a qualcosa.


Da fare: impostare la nostra struttura file

B3. Una terribile fessura in un distributore automatico per una bevanda gassata. Fizz, schiuma, disastro.

Mentre ero in bagno a lavarmi le mani, ho avuto una visione.

 [Aggiungi un nuovo da fare] casella di spunta ← input: facendo clic si traccia una linea attraverso il titolo della voce to do ↓ [x] To Do Item # 1 [] To Do Item # 2 ↑ titolo - doppio clic attiverà un "edit " modalità

O…


Mettiamoci in una struttura che dia vita a questa visione.

generatore-spina dorsale è venuto con alcune armi segrete: sub-generatori. spina dorsale impacchetta la nostra applicazione, ma torna al tuo terminale e guarda cosa possono fare questi ragazzi:


Controlla il tuo index.html:

        

Che ne pensi? Non solo ha creato e inserito file nelle relative directory, ma li ha inclusi anche nel tuo codice HTML.

Ho creato un repository per la nostra applicazione To Do: vai a dare un'occhiata. Daremo un'occhiata ai file insieme, ma ti preghiamo di fare riferimento al repository per ottenere il codice completo.

scripts / main.js

 / * backboneApp globale, $ * / window.backboneApp = Modelli: , Collezioni: , Visualizzazioni: , Router: , init: function () new this.Views.TodosView (collezione: new this.Collections.TodosCollection ()); ; $ (document) .ready (function () backboneApp.init (););

Pensieri

Il generatore Backbone sta stabilendo alcune buone pratiche che è possibile utilizzare fin da subito. Ha preso il nome della tua directory, nel mio caso "backboneApp", e ha esposto un oggetto letterale per contenere i modelli, le raccolte e altri oggetti Backbone che possiamo creare.

Il generatore include anche JSHint nel processo di compilazione della tua app, assicurandosi che il tuo codice sia della qualità più elevata e più coerente. Siete invitati a personalizzare le vostre preferenze all'interno di .jshintrc file nella directory principale della directory del progetto.

Finalmente, $ (Document) .ready chiamerà backboneApp.init, che crea a TodosCollection, quindi lo passa in a TodosView. Approfondirò questi dettagli più presto.

scripts / collezioni / todos-collection.js

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

Pensieri

Se vogliamo che la nostra app To Do sia alquanto utilizzabile, dobbiamo conservare i nostri oggetti To Do da qualche parte. C'è un comodo adattatore Backbone che potrebbe essere familiare con il nome Backbone.LocalStorage. Intercetterà le chiamate di Backbone al back-end remoto predefinito e utilizzerà il browser window.localStorage anziché.

Sappiamo che avremo bisogno dell'adattatore Backbone.LocalStorage, ma dove dovremmo andare a prenderlo? Idea! Idea!

Non abbiamo fatto molto uso di Bower direttamente. Quando la nostra applicazione è stata impalcata, Bower è stato utilizzato dietro le quinte per afferrare Modernizr, Twitter Bootstrap, jQuery, Underscore e Backbone. Ma, cosa succede se vogliamo aggiungere un'altra dipendenza JavaScript?

Torna al tuo terminale preferito e prova questo:

$ spina dorsale ricerca di bower

Ok, wow. Questo è molto. Forse dovremmo restringere il campo.

 $ bower search backbone.localstorage Risultati della ricerca: backbone.localStorage git: //github.com/jeromegn/Backbone.localStorage.git

Eccoci. Ora dobbiamo solo installarlo.

 $ bower install backbone.localStorage --save bower cloning git: //github.com/jeromegn/Backbone.localStorage.git bower cache git: //github.com/jeromegn/Backbone.localStorage.git bower fetching backbone.localStorage bower checking out backbone.localStorage # v1.1.4 bower installando backbone.localStorage # v1.1.4

Quando si lavora con più sviluppatori, può essere fastidioso assicurarsi che tutti abbiano le dipendenze e le versioni corrispondenti corrette. Usando --salvare sopra, stiamo dicendo a Bower di ricordare questa nuova dipendenza, quindi scriverci sopra nel nostro bower.json file. Quando un altro sviluppatore clona il tuo progetto, devono solo essere eseguiti installazione di bower per scaricare ogni dipendenza, mantenendo tutti in sincronia. Ecco perchè app / bower_components è elencato nel tuo .gitignore file. Sono finiti i giorni dei repository gonfiati!

Ora che Bower ha awesomed in tutta la nostra applicazione, entra app / index.html e aggiorna il scripts / vendor.js blocco di commenti:

      

Quando salvi il file, il tuo browser si aggiornerà e avrai la nuova libreria pronta per l'uso. Più specificamente, TodosCollection sarà pronto per l'uso.

scripts / collezioni / todo-model.js

 / * backboneApp globale, Backbone * / backboneApp.Models.TodoModel = Backbone.Model.extend (defaults: title: ", completato: false, toggle: function () this.save (completed:! this.get ('completato') );  );

Pensieri

Questo è un modello Backbone piuttosto semplice. Impostiamo alcune proprietà predefinite per i nostri articoli e definiamo a ginocchiera funzione, usata semplicemente per passare da uno stato "Completo" o "Incompleto".

scripts / views / todos-view.js

 / * backboneApp globale, Backbone, JST * / backboneApp.Views.TodosView = Backbone.View.extend (el: '# todo-app', modello: JST ['app / scripts / templates / todos.ejs'], eventi : / * ... * /, initialize: function () / * ... * /, render: function () / * ... * /, createTodo: function () / * ... * /, addTodoItem: function () / * ... * /, addAllTodoItems: function () / * ... * /);

Pensieri

Questa è la nostra Backbone View più robusta, quindi per vedere le definizioni di queste varie proprietà e metodi, fare riferimento al repository.

Tuttavia, qui ci sono un paio di cose chiave:

 el: "# todo-app"

Questo selettore corrisponde a quello

elemento che abbiamo creato nel nostro index.html file. Questa sarà la nostra vista principale.

 modello: JST ['app / scripts / templates / todos.ejs']

Questa piccola cosa del JST si è intrufolata quando abbiamo detto backbone yo: visualizza ____. Quando il file JavaScript della nostra vista è stato creato, il sub-generatore Backbone ha creato per noi un file modello corrispondente: app / scripts / templates / todos.ejs.

Questi .ejs i file modello definiranno il codice HTML delle nostre viste. Quando eseguiamo la nostra app con server grunt o build grunt, i nostri file modello saranno schiacciati insieme in un oggetto JavaScript, JST. Quando dice il nostro file di visualizzazione template: JST ['path / to / view / template.ejs'], questo si riferisce a quell'oggetto.

script / templates / todos.ejs

 

Pensieri

Poiché abbiamo risposto "Sì" a Twitter Bootstrap incluso per Sass quando abbiamo impalcato la nostra applicazione, ho aggiunto un paio di nomi di classe per arricchire la nostra app. Sentiti libero di disegnare il contenuto del tuo cuore in stili / main.scss file.

stili / main.scss

 @import 'sass-bootstrap / lib / bootstrap'; .hero-unit margin: 50px auto 0 auto; larghezza: 300 px;  forma margin-top: 10px;  ul, li form margin: 0; padding: 0;  ul list-style: none;  li forma display: none;  .editing span display: none;  forma display: blocco in linea;  input: checked ~ span text-decoration: line-through; 

Pensieri

Sass è molto carino.

Inoltre, è fantastico che il browser si ricarichi ancora quando apporti una modifica ai tuoi file Sass. Se hai già usato Sass in precedenza, sai che può essere una seccatura ottenere rapidamente un ambiente di sviluppo produttivo. Fuori dalla scatola di Yeoman, stai modificando, guardando e ricaricando con nessuno dei problemi sopracitati. faccia sorridente.

scripts / views / todo-view.js

 / * backboneApp globale, Backbone, JST * / backboneApp.Views.TodoView = Backbone.View.extend (tagName: 'li', modello: JST ['app / scripts / templates / todo.ejs'], eventi: ' click input [type = "checkbox"] ':' toggle ',' dblclick span ':' toggleEdit ',' submit form ':' toggleEdit ', initialize: function () / * ... * /, render: function () / * ... * /, commuta: function () / * ... * /, toggleEdit: function () / * ... * /);

Pensieri

Questo TodoView rappresenterà un singolo oggetto. Sarà un

  • con alcune funzionalità personalizzate che gestiscono clic, doppio clic e invio di eventi, consentendo a un utente di modificare e salvare un elemento Attività.

    script / templates / todo.ejs

     verificato<%  %>> 
    <%= title %>

    Pensieri

    Abbastanza semplice Stiamo usando alcuni modelli di base di Underscore per sputare valori e attivare a verificato stato sulla nostra casella di controllo.


    Da fare: fallo di nuovo

    La nostra applicazione To Do è effettivamente fatta! È piuttosto semplice in funzionalità, ma dovresti avere un'idea di quanto sia naturale sviluppare un'applicazione usando Yeoman ei suoi amici del generatore. E anche se la funzionalità è di base, nessuna delle tecniche che abbiamo usato per ottenere qui erano "di base". Stiamo utilizzando librerie intelligenti ed efficienti (Sass, Backbone, Underscore) con un processo di sviluppo ottimizzato (Grunt, LiveReload, Compass) e ci sono voluti solo pochi comandi del terminale.

    Se sei come me, probabilmente vorrai smetterla con le cose da fare e iniziare a creare le tue applicazioni. Se vuoi andare a giocare, provaci! Quando hai finito di generare come un pazzo, torna e spedisci la nostra app To Do.


    Da fare: spedirlo

    Mettiamo questa cosa nell'acqua e vediamo se galleggia! NON mettere il computer in acqua. Aspetta, un MacBook Air galleggia? No, probabilmente no. Hmm ...

    Quello era un paragrafo pericoloso. Facciamo in modo che la nostra app sia pronta per la produzione, sicura e asciutta.

    server grunt è stato fantastico, ma è ora di incontrare suo fratello, build grunt. Ne abbiamo parlato un po 'prima, ma passiamo a qualche altro dettaglio.

    Ecco cosa è build grunt compito è definito come nel tuo Gruntfile.js:

     grunt.registerTask ('build', ['clean: dist', // Cancella il tuo .tmp / e dist / folders 'coffee', // Compila i tuoi file CoffeeScript (se presenti) 'createDefaultTemplate', // Crea un JS file che imposta il tuo oggetto JST 'jst', // Compila i tuoi 'scripts / templates /' file 'compass: dist', // Compila il tuo Sassiness 'useminPrepare', // Cerca quelli  nel tuo HTML 'imagemin', // Ottimizza le tue immagini! 'htmlmin', // Minimizza i file HTML 'concat', // Attività usata per concatenare il tuo JS e CSS 'cssmin', // Minimizza i file CSS 'uglify', // Task usato per minimizzare la tua copia 'JS', // Copia i file da .tmp / e app / in dist / 'rev', // Crea hash univoci e rinomina i tuoi nuovi file JS / CSS 'usemin' // Aggiorna i riferimenti nel tuo HTML con i nuovi file]) ;

    Quindi, quella cosa è abbastanza legittima. Tutte queste attività sono definite all'interno di Gruntfile.js, quindi sentiti libero di colpire e modificare intorno per personalizzare la build dell'applicazione. È molto probabile che non sia necessario eseguire alcuna personalizzazione, ma è lì se è necessario.

    Oh, un'altra cosa. build grunt è in realtà racchiuso all'interno di un'altra attività.

    grugnito

    Semplicemente in esecuzione grugnito eseguirà il predefinito compito:

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

    Quei primi due compiti, jshint e test sono facili da trascurare quando affretti un'app fuori dalla porta, ma sono molto importanti.

    JSHint

    Il jshint compito si consulterà con il tuo .jshintrc file per conoscere le tue preferenze, quindi eseguire la scansione di tutti i tuoi file JS per assicurarti che le tue regole siano rispettate. Per ottenere il pieno esaurimento delle opzioni con JSHint, consultare la documentazione di JSHint.

    Test

    Il test compito assomiglia a questo:

     grunt.registerTask ('test', ['clean: server', 'coffee', 'createDefaultTemplate', 'jst', 'compass', 'connect: test', 'mocha']);

    Fondamentalmente fa abbastanza per creare e servire la tua applicazione per il tuo framework di test, Mocha, per eseguire i tuoi test.

    Oh cavolo, test.

    Accanto alla tua app / e dist / directory, questo piccolo test/ buckaroo ha atteso la nostra attenzione. aww.

    Se lo apri, vedrai test/ ha il suo bower.json e index.html, così come a spec / directory. I test avranno alcune dipendenze proprie, la Chai Assertion Library e il framework di test Mocha.

    Espandilo spec / directory e vedrai a test.js file che assomiglia a qualcosa del genere:

     / * descrizione globale, it * / 'use strict'; (function () describe ('Give it some context', function () describe ('forse un po' più di contesto qui ', function () it (' dovrebbe eseguire qui poche asserzioni ', function () ); ););) ();

    Ok, sembra che potremmo usare una richiesta di pull per correggere qualche grammatica. nessuno?

    Se non hai ancora scritto i tuoi test, vedrai termini come descrivere, esso, prima, beforeeach, dopo, e dopo ogni apparire. descrivere è un wrapper per un gruppo di test correlati, ____Ogni sono funzioni opzionali che verranno eseguite prima o dopo il tuo test (s), e ciascuno esso è un test specifico.

    Prova a eseguire a test da grugnito per vedere tutta la magia che si svolge.


    Dovresti giocare e vedere se puoi scrivere alcuni test per la nostra applicazione To Do. Alcune idee per i casi di test potrebbero essere:

    • La creazione di un nuovo elemento Attività viene salvato in localStorage?
    • Il nuovo titolo della voce To Do viene tagliato (rimuovendo spazi bianchi extra)?
    • Quando si modifica un elemento Da fare, si elimina il titolo, quindi si salva l'elemento Da fare da localStorage?

    C'è solo un'altra cosa da fare.

    premere Invio

    $ grunt

    Dovresti vedere le nostre parole preferite: Fatto, senza errori.


    Trovare Yeoman

    Yeoman è ancora piuttosto giovane; ne ha appena trasformato uno! Le cose ora sono grandiose e andranno solo meglio. Tuttavia, come tutti i bambini di un anno, Yeoman sta ancora imparando a camminare senza cadere e parla senza sbavare. Potresti incappare in un bug o due. In tempi come questi, pensa a lui come al tuo piccolo nipotino. Ha bisogno di modelli di ruolo positivi nella sua vita, quindi aiutalo a imparare!

    Quello è diventato vero libro per bambini, molto veloce. Lo farò crescere un po ': ci sono insetti e abbiamo bisogno del tuo aiuto per schiacciare il doody da loro (ho detto "un po'"). Anche se non è un bug, ma tu sei tipo, "Conosco un plug-in Grunt MOLTO più veloce che questo generatore potrebbe usare", segnalalo al tracker dei problemi del generatore appropriato.

    Se vuoi saperne di più su Yeoman o semplicemente conoscere la squadra, scoprirai che siamo disseminati in tutti i seguenti siti.

    • yeoman.io
    • Guida introduttiva
    • @yeoman su Twitter
    • +Yeoman su Google+

    Se sei semplicemente bloccato, prova una delle seguenti risorse per dare una mano.

    • StackOverflow
    • #yeoman su IRC

    Yeoman è solo un pezzo dell'intero stack: NPM, Node, Grunt e Bower. Può essere intimidatorio se non ti è familiare, ma è fondamentale non temere la curva! L'apprendimento dovrà accadere e, come sempre, probabilmente dovrà accadere nel modo più duro prima che si attacchi davvero.

    Psst, se stai usando sudo prima di ogni comando, esegui, non camminare, su Node e NPM in 30 secondi. Qui troverai diversi script che puoi eseguire per ridare il controllo al tuo account utente. Ti aiuterà anche a installare Node e NPM se stai partendo da zero.


    Yo 'Next Application - Will You Yo?

    Come tutti gli strumenti, credo che Yeoman sia qualcosa che ogni sviluppatore dovrebbe provare. Se gli dai un colpo e trovi che non è adatto al tuo compito, io e il resto del team piacerebbe sapere perché. Se hai bisogno di un amico per aiutarti con il tuo progetto, vieni a trovarmi. Sono sempre disponibile intorno ai link sopra, o semplicemente ping su Twitter. Sono @stephenplusplus o Stephen Sawchuk.


    piacere di conoscerti.