Bygge programmer med Yeoman Workflow

Hva er Yeoman?

Lurespørsmål. Det er ikke noe. Det er denne fyren:


I utgangspunktet har han en topp lue, bor i datamaskinen, og venter på deg å fortelle ham hva slags søknad du ønsker å lage. Som et eksempel, ville stillasett et webprogram se ut slik som dette:


Det første som kommer til å tenke er OMG så drømmende. For det andre, takk, bro.

Alt vi gjorde var å fortelle ham hva vi ønsket, og han svarte med bestemte spørsmål for å gi oss enda mer kontroll.

La oss gå tilbake et skritt, skjønt. Ikke alle nye datamaskiner leveres med en Yeoman forhåndsinstallert. Han bor i NPM-pakkelageret. Du må bare be om ham en gang, så pakker han opp og beveger seg inn i harddisken. Pass på at du rydder opp, han liker nye og skinnende ting.

Han er en person med følelser og meninger, men han er veldig lett å jobbe med. Hvis du tror han er for å oppfatte, kan han lett overbevises.

La oss ta et sekund for å bryte fra hverandre yo webapp kommandoen, fra det forrige skjermbildet gjorde det virkelig.

yo

Dette er en OS X, Linux og Windows vennlig system-wide kommando som scorer harddisken din for alle installerte "generatorer", og gir dem kontroll basert på neste argument:

webapp

Dette er faktisk en egen plug-in, eller "generator", kalt generator-nettprogram. Yeoman gjenkjenner andre generator-____ Node-moduler, som åpner døren for å bruke Backbone, AngularJS, og utallige andre you-name-it generatorer.

Noe viktig å ta bort fra dette er, det er det generator-nettprogram modul som ber oss om spørsmål. Det samme gjelder for alle andre generatorer vi installerer. De opprettholdes av samfunnet, ikke nødvendigvis Yeoman-gruppemedlemmene selv.

Ved å bruke Yeoman, sier du ikke "Jeg vil gjøre ting på din måte, mester. Bue Bue,"uten å ha noen kontroll. Det er egentlig ganske motsatt. Det du egentlig sier er:" Jeg vil lage et program som følger beste praksis som har blitt oppdaget av hyppige brukere og bidragsytere til webutviklingssamfunnet. "

Seriøst må du si det akkurat slik, eller det vil ikke fungere.

Skulle du foretrekke å gjøre noe annerledes enn det han gir deg, endrer du bare koden som ble generert for deg, eller til og med gå til kilden til selve generatoren, og send inn ditt bidrag.


Vennskap

Vår kompis, yo har noen kompiser av seg selv, og mener at du alle sammen kommer over endeløse te og smiler. Hvis du ikke har hørt om Grunt eller Bower, er det et raskt sammendrag av hva disse gir oss:

Grynte

Grunt er en JavaScript-basert oppgaveløper, det gjør de skitne tingene. Som yo, Det gir også et grunnsett med funksjonalitet, og lar samfunnet dele sine egne plugin-moduler, eller "oppgaver" som bidrar til å oppnå vanlige ting. Når du stiller søknaden din med yo webapp, Grunt og noen håndplukkede oppgaver kommer sammen, noe som gjør ting som å kjøre nettstedet ditt i et lokalt utviklingsmiljø, sammenkoble og redusere koden din, optimalisere bildene dine og mye mer. Oppgaver kjøres gjennom kommandolinjen ved å skrive grunt server, grunt bygge, grunt test, og mange flere.

Oppgaver defineres og tilpasses i en Gruntfile.js fil, som bor i rotkatalogen av prosjektet ditt. Sjekk det ut for å se hva Yeoman har satt opp for deg.

Bower

Ingen liker å gå til GitHub eller tilfeldige utvikleres nettsteder for å laste ned et .zip av et JavaScript-verktøy. Liker når du henter en Node-pakke med npm installere ___, Bower lar deg si bower installere ___. Komponenten lagres deretter i en katalog du velger, generelt, app / bower_components / for Yeoman-genererte apps. Forutsatt at du ville ha jQuery, ville du kjøre bower install spørring kommandoen, og ta deretter med den aktuelle filen inne i HTML-filen din. I vårt tilfelle,


En typisk applikasjon

La oss bli ville. Det er på tide å lage en app.

Rask rask, men finn nærmeste terminal og sørg for at du har det yo installert globalt:

$ npm installere -g yo

For å generere en web-app, trenger du også generator-nettprogram:

$ npm installer -g generator-webapp

Lag en mappe vi kan leke rundt i, og kjør deretter:

$ yo webapp

Her er hva som burde ha skjedd:

  • En hel masse ting.

Gjorde det? Flink!

For å hindre deg i å bla gjennom hele teksten som bare spyttet ut på deg, er det en oversikt:


Den nye webapplikasjonen ble stillas og dine Bower-komponenter og NPM-pakker ble automatisk installert.

Åpne alle disse nye tingene i favorittredigeren din, og vi vil se over hva vi har.

 Bilde I ─ index.html │ └─ robots.txt │ ├─ nodemoduler / │ ├─ so / │ ├─ mange / │ └─ pakker / │ ├─ test / │ ├─ spec / │ │ └─ test.js │ ├─ .bowerrc │ ├─ bower.json │ └─ index.html │ ├─ .bowerrc ├─ .editorconfig ├─ .gitattributes ├─ .gitignore ├─ .jshintrc ├─ bower.json ├─ Gruntfile.js └─ package.json

Hvis du tar noe bort fra denne artikkelen, la det være den vakre filen / mappe tekstrepresentasjonen ovenfor. Det tok bare en hel Mountain Dew av min tid.

Tilbake på sporet. Det du ser på er den vanligste applikasjonsstrukturen en Yeoman-generator vil produsere.

  • app / er hvor din rene, ikke-sammensatte, ikke-minifiserte kildekoden lever.
  • app / scripts / er hvor JavaScript går. Du er fri til å lage underkataloger og til og med bruke CoffeeScript hvis det er din kopp te. Det var ikke fornuftig. En gang til. Du er fri til å bruke TeaScript hvis det er din kopp kaffe. Nei.
  • app / stiler / er hvor CSS går. Igjen, underkataloger, mindre, Sass, hva er det.
  • app / index.html er den ikke-minifiserte versjonen av index.html som til slutt blir squashed og levert til klienten. Mer om det senere.
  • Gruntfile.js har alle definerte bygge-, server- og testoppgaver.

På dette punktet, yo har gjort jobben sin. Han har gitt deg alt du trenger for å starte en produksjonsklar webapplikasjon. La oss nå flytte fokuset vårt til hvilke Grunt-oppgaver han er forhåndskonfigurert for oss.

grunt bygge

Løping grunt bygge tar din app / kildekoden filer og gjør dem til en distribuert applikasjon, som ender opp i dist /.

At dist / mappen er hva du bruker til serveren din. dist / vil ha sin egen index.html, med referanser til minifisert og sammenkoblet Dist / scripts og Dist / stiler, og optimalisert Dist / bilder. Brukerne vil sette pris på dette. Telefonkortet ditt, oppringingsbrukere vil egentlig setter pris på dette.

Bak scenen, grunt bygge er en oppgave som driver flere underoppgaver. En av dem er grynt-usemin, som ser etter blokker inne i din app / index.html, som dette:

app / index.html

    

Etter din grunt bygge oppgaven fullfører, vil du ende opp med dette:

dist / index.html

 

Det sugde disse skriftene opp, sammenkalt, minifisert, og til og med prefixed dem med unike hashes for å forhindre at nettlesere fra å cache utdaterte versjoner. Ganske kraftig.

Det er en av de skinnende funksjonene om å bruke Yeoman. I stedet for å manuelt definere hva du vil at byggeprosessen skal gjøres hver gang du oppretter et program, kan du bare legge litt tillit til Yo og din valgte generator. Sammen gir de deg alt du trenger for å starte en produksjonsklar applikasjon.

grunt server

Nå som du har sett hvilken type arbeid grunt bygge vil gjøre når søknaden din er ferdig, bør du sannsynligvis begynne å jobbe med søknaden din! Vi lager en sammen på bare noen sekunder, men først får vi se hvilken type arbeidsflyt vi skal ha. Som grunt bygge, grunt server bruker flere andre Grunt-oppgaver for å gjøre utviklingen så enkel som mulig.

Prøv det:


De nevnte "flere andre Grunt-oppgaver" er:

  • ren: Yeoman lagrer noen ting i a .tmp mappe. Det vil bli utslettet.
  • kaffe: Kompilerer CoffeeScript-filer fra app / scripts.
  • kompass: Samler dine Sass-filer fra app / stiler.
  • koble: Oppretter en lokal server, overvåker endringer i kildefilene dine, og utløser deretter en oppdatering i nettleseren din.
  • åpen: Åpner server forekomsten, vanligvis localhost: 9000 i nettleseren din.

Lag en redigering eller to i kildefilene for å se endringen reflektert i nettleseren. Som jeg sa ovenfor, handler dette om så enkelt som det kan være. Det virker bare.


La oss app det opp!

Jeg tenkte selvfølgelig appetittvekkere. Ta litt ostepinner, så møt meg litt.

Vask hendene dine!


La oss lage et program

For å få en følelse for noen andre Yeoman generatorer, la oss prøve Backbone. Vi lager en enkel å gjøre app, bruk Bower for våre avhengigheter, og introdusere deg til en virkelighets arbeidsflyt med Yeoman.

$ Lyder bra? (Y / N)

Jeg antar at du skrev inn "Y". Vi kjører! Men først:

 # installer ryggradgeneratoren: $ npm installer -g generator-ryggraden # lag en annen spilleliste, og gjør deretter disse tingene: $ yo ryggraden _ ----- _ | | | - (o) - | .--------------------------. '---------' | Velkommen til Yeoman, | (_'U'_) | damer og herrer! | / ___ A ___ \ __________________________ '| ~ | __'.___.'__ "| ° 'Y' Ut av boksen inkluderer jeg HTML5 Boilerplate, jQuery, Backbone.js og Modernizr. Vil du inkludere Twitter Bootstrap for Sass? (Ja / Nei) Ja Vil du inkludere KravJS (for AMD-støtte)? (y / N) Nei

Åpne den nye appen i editoren din. Ting bør føle seg ganske kjent etter vår erfaring med webappgeneratoren. Du har fortsatt en app katalog, med scripts /, stiler / og en index.html.

Før du begynner å redigere filer, kjør:

$ grunt server

Som vi snakket om tidligere, starter dette serveren, setter opp klokker på filene våre, blah yipsie-doodle. Din nettleser skal åpne, og du bør bli hilst med:

'Allo,' Allo!

Vel, skyte, vi må beholde det. Det er bare så fint. Men la oss klare ut de andre tingene.

index.html

 

'Allo,' Allo!

Når du lagrer, vil nettleseren din oppdatere, og der har vi det! Bare en enkel, varm "Allo," Allo ".

La oss få oss en spillplan. Vi vet at vi skal lage en til å gjøre app, men hva kan det se ut? Vil vi trenge andre biblioteker for å hjelpe oss?

Hmm.

Det har vært minst 4 sekunder, og jeg har ikke hørt noen svar.

Ok, jeg kommer til å ta en annen Dew etter at filtreet drakk min siste. Jeg vil fortelle deg om jeg tenker på noe.


Å gjøre: Sett opp vår filstruktur

B3. En forferdelig plass i en salgsautomat for karbonert drikke. Fizz, skum, katastrofe.

Mens jeg var på badet vasker hendene mine, hadde jeg en visjon.

 [Legg til et nytt for å gjøre] ← inntastingsboks - klikker vil tegne en linje gjennom tittelen på det som skal gjøres ↓ [x] For å gjøre element # 1 [] For å gjøre element # 2 ↑ tittel - dobbeltklikk vil utløse en "edit "modus

Eller…


La oss sette oss opp med en struktur som vil bringe denne visjonen til liv.

generator-ryggrad kom med noen hemmelige våpen: undergeneratorer. yo ryggrad stillte opp søknaden vår, men vende tilbake til terminalen din og sjekke ut hva disse gutta kan gjøre:


Sjekk ut index.html:

        

Hvordan er det det! Det skapte og lagde ikke bare filer i relevante kataloger, det inkluderte dem også i HTML for deg.

Jeg har opprettet et lagringssted for vårt To Do-program - gå sjekk det ut. Vi tar et blikk på filene sammen, men vennligst referer til depotet for å få hele koden.

scripts / main.js

 / * global backboneApp, $ * / window.backboneApp = Modeller: , Samlinger: , Visninger: , Rutere: , init: funksjon () nytt this.Views.TodosView (collection: new this.Collections.TodosCollection ()); ; $ (dokument) .ready (funksjon () backboneApp.init (););

tanker

Ryggradgeneratoren etablerer noen gode metoder du kan bruke rett ut av boksen. Det tok navnet på katalogen din, i mitt tilfelle "backboneApp", og eksponerte et objekt bokstavelig for å holde Modeller, Samlinger og andre Backbone-objekter vi kan lage.

Generatoren inneholder også JSHint i appens byggeprosess, og sørger for at koden din er av høyeste og mest konsistente kvalitet. Du oppfordres til å tilpasse dine preferanser inne i .jshintrc filen i roten av prosjektets katalog.

Endelig, $ (Document) .ready vil ringe backboneApp.init, som skaper en TodosCollection, så passerer den inn i a TodosView. Jeg går snart over disse detaljene.

scripts / samlinger / todos-collection.js

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

tanker

Hvis vi vil at vår app skal være noe brukbar, må vi lagre våre ting å gjøre et sted. Det er en praktisk Backbone adapter du kan være kjent med som heter Backbone.LocalStorage. Det vil avskjære Backbone samtaler til standard fjernkontroll og bruke nettleseren din window.localStorage i stedet.

Vi vet at vi trenger Backbone.LocalStorage-adapteren, men hvor skal vi gå for å få det? Idé! Idé!

Vi har ikke brukt mye av Bower direkte. Da vår søknad ble stillas, ble Bower brukt bak kulissene for å hente Modernizr, Twitter Bootstrap, jQuery, Underscore og Backbone. Men hva om vi vil legge til i en annen JavaScript-avhengighet?

Gå tilbake til favorittterminalen din og prøv dette:

$ bower søk ryggrad

Ok, wow. Det er mye. Kanskje vi burde begrense det ned.

 $ bower søk backbone.localstorage Søkeresultater: backbone.localStorage git: //github.com/jeromegn/Backbone.localStorage.git

Der går vi. Nå må vi bare installere den.

 $ bower installer backbone.localStorage - lag bower kloning git: //github.com/jeromegn/Backbone.localStorage.git bower cached git: //github.com/jeromegn/Backbone.localStorage.git bower henter backbone.localStorage bower kontroll ut backbone.localStorage # v1.1.4 bower installere backbone.localStorage # v1.1.4

Når du jobber med flere utviklere, kan det være plagsomt å sikre at alle har de riktige avhengighetene og de tilsvarende versjonene. Ved bruk av --lagre ovenfor, forteller vi Bower å huske denne nye avhengigheten, og skriv om det i vår bower.json fil. Når en annen utvikler kloner prosjektet ditt, må de bare løpe bower installasjon å laste ned hver avhengighet, holde alle i synkronisering. Derfor app / bower_components er oppført i din .gitignore fil. Borte er dagene med oppblåste repositorier!

Nå som Bower har awesomed over hele vår søknad, gå inn i app / index.html og oppdatere scripts / vendor.js kommentarblokk:

      

Når du lagrer filen, vil nettleseren din oppdatere og du vil ha det nye biblioteket klar til bruk. Mer spesifikt, TodosCollection vil ha den klar til bruk.

scripts / samlinger / todo-model.js

 / * global backboneApp, Backbone * / backboneApp.Models.TodoModel = Backbone.Model.extend (standard: title: ", ferdig: false, bytt: funksjon () this.save (ferdig:! this.get ('fullført')););

tanker

Dette er en ganske grunnleggende ryggradsmodell. Vi angir noen standardegenskaper for våre Ting å gjøre og definer en veksle funksjon, bare brukes til å bytte mellom en "Komplett" eller "Ufullstendig" tilstand.

scripts / visninger / todos-view.js

 / * Global backboneApp, Backbone, JST * / backboneApp.Views.TodosView = Backbone.View.extend (el: '# todo-app', mal: JST ['app / skript / maler / todos.ejs'] : / * ... * /, initialiser: funksjon () / * ... * /, gjengi: funksjon () / * ... * /, createTodo: function () / * ... * /, addTodoItem: funksjon () / * ... * /, addAllTodoItems: funksjon () / * ... * /);

tanker

Dette er vår mest robuste Ryggradssyn, for å se definisjonene til disse ulike egenskapene og metodene, vennligst referer til depotet.

Men her er et par viktige ting:

 el: '# todo-app'

Denne velgeren stemmer overens med det

elementet vi opprettet i vår index.html fil. Dette blir vår primære visning.

 mal: JST ['app / skript / maler / todos.ejs']

Denne lille JST-tingen snuck da vi sa yo ryggrad: se ____. Når vår View-JavaScript-fil ble opprettet, skapte Backbone-undergeneratoren en matchende malfil for oss: app / scripts / templates / todos.ejs.

Disse .ejs malfiler vil definere våre visnings HTML. Når vi kjører vår app med grunt server eller grunt bygge, våre malfiler blir knust sammen til et JavaScript-objekt, JST. Når visningsfilen vår sier mal: JST ['path / to / view / template.ejs'], dette refererer til det objektet.

scripts / templates / todos.ejs

 

tanker

Fordi vi svarte "Ja" for å inkludere Twitter Bootstrap for Sass når vi stillte opp søknaden vår, har jeg lagt til et par klassenavn for å se ganske opp på vår app. Ta gjerne stilen til ditt hjertes innhold i stiler / main.scss fil.

stiler / main.scss

 @import 'sass-bootstrap / lib / bootstrap'; .hero-enhet margin: 50px auto 0 auto; bredde: 300px;  skjema margin-top: 10px;  ul, li skjema margin: 0; polstring: 0;  ul listestil: none;  li form display: none;  .editing span display: none;  skjema display: inline-block;  inngang: merket ~ span text-decoration: line-through; 

tanker

Sass er ganske kult.

Det er også ganske kult at nettleseren fortsatt laster opp når du endrer dine Sass-filer. Hvis du har brukt Sass før, vet du at det kan være et problem for å få et produktivt utviklingsmiljø satt opp raskt. Ut av Yeoman-boksen redigerer, ser du på og laster opp med ingen av de nevnte problemene. Smiley ansikt.

scripts / visninger / todo-view.js

 / * Global backboneApp, Backbone, JST * / backboneApp.Views.TodoView = Ryggrad.View.extend (tagName: 'li', mal: JST ['app / scripts / templates / todo.ejs'], hendelser: ' klikk inntasting [type = "avkrysningsrute"] ':' veksle ',' dblclick span ':' toggleEdit ',' send skjema ':' toggleEdit ', initialiser: funksjon () / * ... * /, gjengi: funksjon () / * ... * /, bytt: funksjon () / * ... * /, toggleEdit: funksjon () / * ... * /);

tanker

Dette TodoView vil representere et enkelt element. Det blir en

  • Med noen tilpassede funksjonalitetshåndtering klikker du, dobbeltklikker og sender hendelser, slik at en bruker kan redigere og lagre en Til-gjør-element.

    scripts / templates / todo.ejs

     sjekket<%  %>> 
    <%= title %>

    tanker

    Enkel nok. Vi bruker noen grunnleggende Underscore templating for å spytte ut verdier og bytte a sjekket meld deg inn i avkrysningsruten.


    Å gjøre: Gjør det igjen

    Vårt å gjøre søknad er faktisk ferdig! Det er ganske grunnleggende i funksjonalitet, men du bør ha en følelse av hvor naturlig det er å utvikle et program ved hjelp av Yeoman og hans Generator kompiser. Og selv om funksjonaliteten er grunnleggende, var ingen av teknikkene som vi pleide å komme hit, "grunnleggende". Vi bruker smarte, effektive biblioteker (Sass, Backbone, Underscore) med en finjustert utviklingsprosess (Grunt, LiveReload, Compass), og det tok oss bare noen få terminalkommandoer.

    Hvis du er som meg, vil du sannsynligvis stoppe med å gjøre ting og begynne å lage dine egne applikasjoner. Hvis du vil gå rundt, gå for det! Når du er ferdig med å generere som en gal person, kom tilbake og la oss sende vår To Do app.


    Å gjøre: send det

    La oss sette denne tingen i vannet og se om hun flyter! IKKE sett datamaskinen i vannet. Vent, ville en MacBook Air flyte? Nei, sannsynligvis ikke. Hmm ...

    Det var et farlig avsnitt. La oss bare få vår app klar for produksjon, trygt og tørt.

    grunt server har vært fantastisk, men det er på tide å møte sin bror, grunt bygge. Vi snakket om ham litt tidligere, men la oss gå over noen få detaljer.

    Her er hva grunt bygge oppgaven er definert som i din Gruntfile.js:

     grunt.registerTask ('build', ['clean: dist', // Fjerner din .tmp / og dist / mapper 'kaffe', // Kompilerer dine CoffeeScript-filer (hvis noen) 'createDefaultTemplate', // Skaper en JS fil som setter opp JST-objektet 'jst', // Kompilerer 'skript / maler /' filer 'kompass: dist', // Kompilerer din Sassiness 'useminPrepare', // Ser etter de  i HTML'en din, 'imagemin', // Optimaliserer bildene dine! 'htmlmin', // Minifiserer HTML-filene dine 'concat', // Oppgave som brukes til å sammenkoble JS og CSS 'cssmin', // Minifiserer dine CSS-filer 'uglify', // Oppgave som brukes til å redusere JS 'kopi', // Kopierer filer fra .tmp / og app / til dist / 'rev', // Oppretter unike hashes og omtaler dine nye JS / CSS-filer 'usemin' // Oppdaterer referansene i HTML-en din med de nye filene]) ;

    Så, den tingen er ganske legitim. Alle disse oppgavene er definert inne i Gruntfile.js, så vær så snill å peke og justere rundt for å tilpasse programmets bygg. Det er høyst sannsynlig at du ikke trenger å gjøre noen tilpasninger i det hele tatt, men det er der hvis du trenger det.

    Oh, en annen ting. grunt bygge er faktisk pakket inn i en annen oppgave.

    grynte

    Bare kjører grynte vil utføre misligholde oppgave:

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

    De to første oppgavene, jshint og test er lett å overse når rushing en app ut døren, men er svært viktig.

    JSHint

    De jshint oppgaven vil konsultere din .jshintrc fil for å lære dine preferanser, og skann gjennom alle JS-filene dine for å sikre at reglene dine overholdes. For å få fullstendig nedkjøring av alternativene dine med JSHint, sjekk JSHint-dokumentasjonen.

    Test

    De test oppgaven ser slik ut:

     grunt.registerTask ('test', ['ren: server', 'kaffe', 'createDefaultTemplate', 'jst', 'kompass', 'connect: test', 'mocha']);

    Det gjør i utgangspunktet nok til å lage og betjene din søknad om testrammen din, Mocha, for å utføre testene dine.

    Oh skit, tester.

    Naboen til din app / og dist / kataloger, denne lille test/ buckaroo har ventet på vår oppmerksomhet. aww.

    Hvis du åpner det opp, vil du se test/ har sin egen bower.json og index.html, så vel som a spec / katalogen. Dine tester vil ha noen avhengigheter av seg selv, Chai Assertion Library og Mocha testing rammeverket.

    Utvide det spec / katalog og du får se en test.js fil som ser noe ut som dette:

     / * global beskrivelse, det * / 'bruk strenge'; (funksjon () (beskriv 'gi noe kontekst'), funksjon () beskriv 'kanskje litt mer sammenheng her', funksjon ););) ();

    Ok, det ser ut til at vi kunne bruke en trekkforespørsel for å rette opp noen grammatikk. Enhver?

    Hvis du ikke har skrevet dine egne tester før, ser du vilkår som beskrive, den, før, beforeEach, etter, og afterEach dukker opp. beskrive er en wrapper for en gruppe relaterte tester, ____Hver er valgfrie funksjoner som skal utføres før eller etter din test (er), og hver den er en bestemt test.

    Prøv å kjøre en grunt test for å se alt det magiske utfolde seg.


    Du bør leke deg rundt og se om du kan skrive noen tester for vårt program for å gjøre. Noen ideer til test tilfeller kan være:

    • Opprettes et nytt å gjøre element, lagret i localStorage?
    • Skal en ny tittel for å gjøre elementet bli trimmet (fjerner ekstra hvitt plass)?
    • Når du redigerer et To Do-objekt, sletter du tittelen, og deretter lagrer du Til-gjør-objektet fra localStorage?

    Det er bare en ting å gjøre.

    trykk enter

    $ grunt

    Du bør se våre favorittord: Ferdig, uten feil.


    Finne Yeoman

    Yeoman er fortsatt ganske ung; han snudde seg bare! Ting er ganske bra nå, og de kommer bare til å bli bedre. Likevel, som alle ettåringer, lærer Yeoman fortsatt å gå uten å falle, og snakke uten å kaste seg. Du kan bare løpe inn i en feil eller to. I tider som disse, tenk på ham som din søte lille nevø. Han trenger positive rollemodeller i sitt liv, så hjelper ham å lære!

    Det fikk ekte barnas bok-y, ekte fort. Jeg skal vokse opp litt: det er feil og vi trenger hjelp til å squash doody ut av dem (jeg sa "litt"). Selv om det ikke er en feil, men du er som, "Jeg kjenner en mye raskere Grunt-plugin-modulen denne generatoren kunne bruke," rapporterer den til riktig generators problemspor.

    Hvis du vil lære mer om Yeoman eller bare bli kjent med teamet, vil du finne oss peppered over de følgende nettstedene.

    • yeoman.io
    • Komme i gang Guide
    • @yeoman på Twitter
    • +Yeoman på Google+

    Hvis du bare står fast, kan du prøve en av følgende ressurser for en hjelpende hånd.

    • Stackoverflow
    • #yeoman på IRC

    Yeoman er bare ett stykke av hele stakken NPM, Node, Grunt og Bower. Det kan være skremmende hvis du ikke er kjent med disse, men det er viktig å ikke frykte kurven! Læring vil måtte skje, og som alltid vil det sannsynligvis måtte skje den harde måten før den virkelig stikker.

    Psst, hvis du bruker sudo Før hver kommando, løp, ikke gå, til Node og NPM på 30 sekunder. Der finner du flere skript du kan kjøre for å gi kontroll tilbake til brukerkontoen din. Det vil også hjelpe deg med å installere Node og NPM hvis du starter fra bunnen av.


    Yo 'Next Application - Vil du Yo?

    Som alle verktøy, tror jeg Yeoman er noe hver utvikler burde prøve. Hvis du gir det et skudd og finner det ikke egnet for oppgaven din, vil jeg og resten av teamet gjerne høre hvorfor. Hvis du trenger en kompis for å hjelpe deg med prosjektet ditt, kom og finn meg. Jeg er alltid tilgjengelig rundt linkene over, eller bare ping meg på Twitter. Jeg er @stephenplusplus eller Stephen Sawchuk.


    Hyggelig å møte deg.