Share
Strik vraag. Het is geen ding. Het is deze kerel:
Kortom, hij draagt een hoge hoed, woont op je computer en wacht tot je hem vertelt wat voor soort applicatie je wilt creëren. Bijvoorbeeld, steigers van een webapplicatie zien er ongeveer zo uit:
Het eerste dat in me opkomt is OMG, zo dromerig. Ten tweede, bedankt, vriend.
Het enige wat we deden was hem vertellen wat we wilden en hij antwoordde met specifieke vragen om ons nog meer controle te geven.
Laten we nog een stap terug doen. Niet elke nieuwe computer wordt geleverd met een Yeoman vooraf geïnstalleerd. Hij woont in de NPM-pakketrepository. Je hoeft hem maar één keer te vragen, dan pakt hij in en gaat hij naar je harde schijf. Zorg dat je opruimt, hij houdt van nieuwe en glanzende dingen.
Hij is een persoon met gevoelens en meningen, maar hij is heel gemakkelijk om mee te werken. Als je denkt dat hij te eigenzinnig is, kan hij gemakkelijk overtuigd worden.
Laten we even nadenken over wat dat is je webapp commando, van de vorige screenshot echt gedaan.
Accentsconagua
yoDit is een OS X-, Linux- en Windows-vriendelijke systeemomvattende opdracht die je harde schijf doorzoekt naar geïnstalleerde 'generators' en ze vervolgens controle geeft op basis van het volgende argument:
web applicatieDit is eigenlijk een afzonderlijke plug-in of "generator" genaamd generator-webapp. Yeoman herkent ander generator-____ Knoopmodules, die de deur openen voor het gebruik van Backbone, AngularJS en talloze andere you-name-it-generatoren.
Iets belangrijks om hier afstand van te nemen is, het is het generator-webapp module die ons vragen stelt. Hetzelfde geldt voor alle andere generatoren die we installeren. Ze worden onderhouden door de gemeenschap, niet noodzakelijkerwijs de Yeoman-teamleden zelf.
Door Yeoman te gebruiken, zeg je niet: "Ik wil de dingen op jouw manier doen, meester. boog boog,"zonder controle, het is eigenlijk precies het tegenovergestelde." Wat u eigenlijk zegt, is: "Ik wil een toepassing maken die de beste werkwijzen volgt die zijn ontdekt door frequente gebruikers en medewerkers van de webontwikkelingsgemeenschap."
Serieus, je moet het zo zeggen, anders werkt het niet.
Als u liever iets anders doet dan wat hij u geeft, hoeft u alleen maar de code te wijzigen die voor u is gegenereerd, of zelfs naar de bron van de 'generator' zelf te gaan en uw bijdrage in te sturen.
Onze buddy, jij hebt een paar vrienden, en denkt dat je het allemaal met elkaar kunt vinden over eindeloze thee en een glimlach. Als u nog niet van Grunt of Bower hebt gehoord, volgt hier een kort overzicht van wat deze ons geven:
Grunt is een op JavaScript gebaseerde taakloper, die de vieze dingen doet. Net zoals yo, het biedt ook een basisset van functionaliteit en stelt de community vervolgens in staat om zijn eigen plug-ins te delen, oftewel "taken" die gemeenschappelijke dingen helpen realiseren. Wanneer u uw aanvraag scaffold met je webapp, Grunt en een aantal met de hand geselecteerde taken komen samen, waardoor dingen worden gedaan zoals het runnen van uw website in een lokale ontwikkelomgeving, het samenvoegen en verkleinen van uw code, het optimaliseren van uw afbeeldingen en nog veel meer. Taken worden door de opdrachtregel uitgevoerd, door te typen gruntserver, grunt build, gromtest, en nog veel meer.
Taken worden gedefinieerd en aangepast in a Gruntfile.js bestand, dat in de hoofdmap van uw project leeft. Bekijk het om te zien wat Yeoman voor u heeft opgezet.
Niemand vindt het leuk om naar GitHub of de sites van willekeurige ontwikkelaars te gaan om een .zip van een JavaScript-tool te downloaden. Bijvoorbeeld bij het ophalen van een Node-pakket met npm installeren ___, Bower laat je zeggen prieel installeren ___. Het onderdeel wordt vervolgens opgeslagen in een directory naar keuze in het algemeen, app / bower_components / voor door Yeoman gegenereerde apps. Ervan uitgaande dat je jQuery wilde, zou je de prieel installeren query commando, voeg dan het relevante bestand toe aan uw HTML-bestand. In ons geval,
Laten we wild worden. Het is tijd om een app te maken.
Maar snel, zoek je dichtstbijzijnde terminal en zorg dat je die hebt yo wereldwijd geïnstalleerd:
$ npm installatie -g yo
Om een webapp te genereren, hebt u ook nodig generator-webapp:
$ npm installatie -g generator-webapp
Maak een map waarin we kunnen rond spelen en voer dan uit:
$ yo webapp
Dit is wat er had moeten gebeuren:
Deed het? Goed!
Om te voorkomen dat je omhoog scrolt door de tekst die je zojuist uitspuwde, heb je een overzicht:
De nieuwe webtoepassing stond in steigers en uw Bower-componenten en NPM-pakketten werden automatisch geïnstalleerd.
Open al deze nieuwe dingen in je favoriete editor en we zullen kijken wat we hebben.
├─ app / │ ├─ images / │ │ ├─ glyphicons-halflings.png │ │ └─ glyphicons-halflings-white.png │ ├─ scripts / │ │ ├─ leverancier / │ │ │ └─ bootstrap.js │ │ ├─ app.js │ │ ├─ hello.coffee │ │ └─ main.js │ ├─ stijlen / │ │ └─ main.css │ ├─ .htaccess │ ├─ 404.html │ ├─ favicon.ico │ ├ ─ index.html │ └─ robots.txt │ ├─ node_modules / │ ├─ so / │ ├─ veel / │ └─ pakketten / │ ├─ test / │ ├─ spec / │ │ └─ test.js │ ├─ .bowerrc │ ├─ bower.json │ └─ index.html │ ├─ .bowerrc ├─ .editorconfig ├─ .gitattributes ├─ .gitignore ├─ .jshintrc ├─ bower.json ├─ Gruntfile.js └─ package.json
Als je iets wegneemt van dit artikel, laat het dan de mooie tekstvertaling van het bestand / de map hierboven zijn. Dat kostte een hele berg Dew van mijn tijd.
Terug op het goede spoor. Waar u naar kijkt, is de meest voorkomende applicatiestructuur die een Yeoman-generator zal produceren.
app / is waar uw zuivere, niet-gecompileerde, niet-verkleinde broncode leeft.app / scripts / is waar uw JavaScript naartoe gaat. Je bent vrij om submappen te maken en zelfs CoffeeScript te gebruiken als dat je kopje koffie is. Dat klopte niet. Nog een keer. Je bent vrij om TeaScript te gebruiken als dat je kopje koffie is. Nee.app / stijlen / is waar uw CSS naartoe gaat. Nogmaals, submappen, MINDER, Sass, whatevs.app / index.html is de niet-verkleinde versie van index.html dat zal uiteindelijk worden verpletterd en afgeleverd bij de klant. Daarover later meer.Gruntfile.js heeft alle build-, server- en testtaken gedefinieerd.Op dit punt, yo heeft zijn werk gedaan. Hij heeft je alles gegeven wat je nodig hebt om een productieafhankelijke webtoepassing te lanceren. Laten we nu onze focus verschuiven naar wat Grunt-taken die hij voor ons heeft geconfigureerd.
grunt buildhardlopen grunt build neemt uw app / broncodebestanden en verandert ze in een distribueerbare applicatie, die uiteindelijk in dist /.
Dat dist / map is wat u toevoegt aan uw server. dist / zal het hebben index.html, met verwijzingen naar verkleind en aaneengeschakeld dist / scripts en dist / stijlen, en geoptimaliseerd dist / images. Uw gebruikers zullen dit op prijs stellen. Je telefoonkaart, inbel gebruikers zullen dat doen werkelijk waardeer dit.
Achter de schermen, grunt build is een taak die verschillende subtaken uitvoert. Een daarvan is grunt-usemin, die naar blokken binnenin je kijkt app / index.html, zoals dit:
app / index.html
Na jouw grunt build taak is voltooid, dan krijg je dit:
dist / index.html
Het heeft die scripts opgezogen, samengevoegd, verkleind en zelfs voorafgegaan door unieke hashes om te voorkomen dat browsers verouderde versies in de cache opslaan. Heel krachtig.
Dat is een van de stralende functies bij het gebruik van Yeoman. In plaats van handmatig te definiëren wat je wilt laten bouwen, elke keer dat je een applicatie aanmaakt, kun je gewoon wat vertrouwen stellen in Yo en de door jou gekozen generator. Samen leggen ze je vast met alles wat je nodig hebt om een productieafhankelijke applicatie te lanceren.
gruntserverNu dat je hebt gezien wat voor soort werk grunt build zal doen wanneer uw aanvraag voltooid is, u zou waarschijnlijk moeten beginnen met werken aan uw applicatie! We zullen er in één seconde een maken, maar laten we eerst eens kijken wat voor soort workflow we zullen hebben. Net zoals grunt build, gruntserver gebruikt verschillende andere Grunt-taken om de ontwikkeling zo eenvoudig mogelijk te maken.
Probeer het:
De eerder genoemde "verschillende andere grunt-taken" zijn:
schoon: Yeoman slaat wat spullen op in a .tmp map. Dat zal worden weggevaagd.koffie: Hiermee compileer je je CoffeeScript-bestanden app / scripts.kompas: Compileert uw Sass-bestanden van app / stijlen.aansluiten: Maakt een lokale server, bewaakt wijzigingen in uw bronbestanden en activeert vervolgens een herladen in uw browser.Open: Opent de serverinstantie meestal localhost: 9000 in uw browser.Maak een of twee bewerkingen in de bronbestanden om de wijziging in de browser te zien. Zoals ik hierboven al zei, dit is ongeveer net zo gemakkelijk als het kan zijn. Het werkt gewoon.
Ik bedoelde natuurlijk voorgerechten. Grijp wat kaasstokken, ontmoet me dan een beetje.
Was je handen!
Om een gevoel voor sommige andere Yeoman-generatoren te krijgen, laten we Backbone proberen. We maken een eenvoudige To Do-app, gebruiken Bower voor onze afhankelijkheden en introduceren u een real-life workflow met Yeoman.
$ Klinkt goed? (Y / n)
Ik neem aan dat je "Y" hebt ingevoerd. We rijden! Maar eerst:
# installeer de Backbone-generator: $ npm install -g generator-backbone # maak nog een afspeelmap en doe deze dingen: $ yo backbone _ ----- _ | | | - (o) - | .--------------------------. '---------' | Welkom bij Yeoman, | (_'U'_) | dames en heren! | / ___ A ___ \ '__________________________' | ~ | __'.___.'__ "| ° 'Y' Out of the box Ik neem HTML5 Boilerplate, jQuery, Backbone.js en Modernizr op. Wilt u Twitter Bootstrap voor Sass opnemen? (J / N) Ja Wilt u inclusief RequireJS (voor AMD-ondersteuning)? (j / N) Nee
Open de nieuwe app in je editor. De dingen moeten vrij vertrouwd aanvoelen na onze ervaring met de webapp-generator. Je hebt nog steeds een app map, met scripts /, stijlen / en een index.html.
Voordat we beginnen met het bewerken van bestanden, voert u het volgende uit:
$ grunt-server
Zoals we eerder hebben besproken, start dit de server, stelt het horloges in voor onze bestanden, blah blah yipsie-doodle. Uw browser moet worden geopend en u moet worden begroet met:
Wel, schiet, we moeten dat houden. Het is gewoon zo leuk. Laten we echter de andere dingen opruimen.
index.html
'Allo,' Allo!
Wanneer u opslaat, wordt uw browser vernieuwd en daar hebben we het! Gewoon een simpele, warme "'Allo,' Allo '.
Laten we een spelplan maken. We weten dat we een To Do-app gaan maken, maar hoe ziet dat eruit? Zullen we andere bibliotheken nodig hebben om ons te helpen?
Hmm.
Het is minstens 4 seconden geweest en ik heb geen antwoorden gehoord.
Oké, ik ga nog een Dew pakken nadat die boomstam mijn laatste heeft gedronken. Ik laat het je weten als ik ergens aan denk.
B3. Een vreselijk slot in een automaat voor een koolzuurhoudende drank. Fizz, schuim, rampspoed.
Terwijl ik in de badkamer mijn handen waste, had ik een visioen.
[Een nieuw actie toevoegen] ← invoer selectievakje - klikken zal een lijn trekken door de titel van het te doen item ↓ [x] To Do Item # 1 [] To Do Item # 2 ↑ titel - dubbelklikken activeert een "edit" "modus
Of…
Laten we onszelf oprichten met een structuur die deze visie tot leven zal brengen.
generator-backbone kwam met een aantal geheime wapens: subgeneratoren. je ruggengraat steigers onze applicatie, maar keer terug naar uw terminal en kijk wat deze jongens kunnen doen:
Bekijk uw index.html:
Hoe dat! Het creëerde en plaatste niet alleen bestanden in relevante mappen, het bevatte zelfs ze in uw HTML voor u.
Ik heb een repository gemaakt voor onze To Do-applicatie - ga eens kijken. We zullen samen een blik werpen op de bestanden, maar verwijs naar de repository om de volledige code te krijgen.
scripts / main.js/ * global backboneApp, $ * / window.backboneApp = Models: , Collections: , Views: , Routers: , init: function () new this.Views.TodosView (collection: new this.Collections.TodosCollection ()); ; $ (document) .ready (function () backboneApp.init (););
De Backbone-generator stelt een aantal goede werkwijzen vast die u direct uit de doos kunt gebruiken. Het heeft de naam van je directory overgenomen, in mijn geval 'backboneApp', en een letterlijk object getoond om de modellen, collecties en andere Backbone-objecten die we kunnen maken te bevatten.
De generator bevat ook JSHint in het buildproces van uw app, en zorgt ervoor dat uw code van de hoogste, meest consistente kwaliteit is. U wordt aangemoedigd om uw voorkeuren aan te passen binnen de .jshintrc bestand in de hoofdmap van de map van uw project.
Tenslotte, $ (Document) .ready zal bellen backboneApp.init, welke een creëert TodosCollection, dan geeft het door in een TodosView. Ik zal deze binnenkort in meer detail bespreken.
scripts / collecties / todos-collection.js / * global backboneApp, Backbone * / backboneApp.Collections.TodosCollection = Backbone.Collection.extend (localStorage: new Backbone.LocalStorage ('backbone-generator-todos'), initialize: function () this.model = backboneApp.Models .ToModel;); Als we willen dat onze To Do-app enigszins bruikbaar is, moeten we onze taken voor taken opslaan. Er is een handige Backbone-adapter die je misschien kent: Backbone.LocalStorage. Het onderschept de oproepen van Backbone naar de standaard remote backend en gebruikt de browser window.localStorage in plaats daarvan.
We weten dat we de Backbone.LocalStorage-adapter nodig hebben, maar waar moeten we heen om het te krijgen? Idee! Idee!
We hebben Bower niet veel rechtstreeks gebruikt. Toen onze applicatie in de steigers stond, werd Bower achter de schermen gebruikt om Modernizr, Twitter Bootstrap, jQuery, Underscore en Backbone te pakken. Maar wat als we een andere JavaScript-afhankelijkheid willen toevoegen??
Ga terug naar je favoriete terminal en probeer dit:
$ bower search backbone
Oké, wauw. Dat is veel. Misschien moeten we dat verkleinen.
$ bower search backbone.localstorage Zoekresultaten: backbone.localStorage git: //github.com/jeromegn/Backbone.localStorage.git
Daar gaan we. Nu hoeven we het alleen maar te installeren.
$ bower installeert backbone.localStorage --save bower cloning git: //github.com/jeromegn/Backbone.localStorage.git bower cached git: //github.com/jeromegn/Backbone.localStorage.git bower fetching backbone.localStock bower checking out backbone.localStorage # v1.1.4 prieel installeren backbone.localStorage # v1.1.4
Wanneer u met meerdere ontwikkelaars werkt, kan het lastig zijn om te zorgen dat iedereen de juiste afhankelijkheden en overeenkomende versies heeft. Door het gebruiken van --opslaan hierboven, vertellen we Bower om deze nieuwe afhankelijkheid te onthouden, en erover te schrijven in onze bower.json het dossier. Wanneer een andere ontwikkelaar uw project klonen, moeten ze gewoon uitvoeren installatie van prieel om elke afhankelijkheid te downloaden en iedereen gesynchroniseerd te houden. Daarom app / bower_components wordt vermeld in uw .gitignore het dossier. Voorbij zijn de dagen van opgeblazen opslagplaatsen!
Nu heeft Bower dat awesomed overal in onze applicatie, ga in app / index.html en werk het scripts / vendor.js commentaar blok:
Wanneer u het bestand opslaat, wordt uw browser vernieuwd en heeft u de nieuwe bibliotheek klaar voor gebruik. Specifieker, TodosCollection zal het klaar hebben om te gebruiken.
scripts / collecties / todo-model.js / * global backboneApp, Backbone.model.extend (default: title: ", completed: false, toggle: function () ('voltooid') ); ); Dit is een vrij eenvoudig Backbone-model. We hebben een aantal standaard eigenschappen voor onze taken te doen en definiëren een toggle functie, gewoon gebruikt om te schakelen tussen een "Complete" of "Incomplete" status.
scripts / views / todos-view.js/ * global backboneApp, Backbone, JST * / backboneApp.Views.TodosView = Backbone.View.extend (el: '# todo-app', sjabloon: JST ['app / scripts / templates / todos.ejs'], evenementen : / * ... * /, initialiseren: function () / * ... * /, render: function () / * ... * /, createTodo: function () / * ... * /, addTodoItem: function () / * ... * /, addAllTodoItems: function () / * ... * /);
Dit is onze meest robuuste Backbone View, dus raadpleeg de repository om de definities van deze verschillende eigenschappen en methoden te bekijken.
Hier zijn echter een paar belangrijke dingen:
el: '# todo-app'
Deze selector komt overeen met dat element dat we hebben gemaakt in onze index.html het dossier. Dit wordt onze primaire weergave.
sjabloon: JST ['app / scripts / templates / todos.ejs']
Dit kleine JST ding sloop naar binnen toen we zeiden je ruggengraat: bekijk ____. Toen het JavaScript-bestand van onze weergave werd gemaakt, heeft de subgenerator van de backbone een overeenkomend sjabloonbestand voor ons gemaakt: app / scripts / templates / todos.ejs.
Deze .EJS sjabloonbestanden definiëren onze HTML voor weergaven. Wanneer we onze app gebruiken met gruntserver of grunt build, onze sjabloonbestanden worden samen verpletterd tot een JavaScript-object, JST. Wanneer ons kijkbestand zegt template: JST ['path / to / view / template.ejs'], dit verwijst naar dat object.
scripts / templates / todos.ejsOmdat we 'Ja' hebben geantwoord op het opnemen van Twitter Bootstrap voor Sass toen we onze applicatie scaffoldden, heb ik een aantal klassenamen toegevoegd om onze app behoorlijk op te waarderen. Voel je vrij om naar hartelust te stylen in de stijlen / main.scss het dossier.
stijlen / main.scss@import 'sass-bootstrap / lib / bootstrap'; .hero-unit margin: 50px auto 0 auto; breedte: 300 px; form margin-top: 10px; ul, li form margin: 0; opvulling: 0; ul lijststijl: geen; li form display: none; .editing span display: none; form display: inline-block; invoer: gecontroleerd ~ span text-decoration: line-through;
Sass is best cool.
Het is ook best cool dat de browser nog steeds opnieuw laadt wanneer je een wijziging in je Sass-bestanden aanbrengt. Als u Sass eerder hebt gebruikt, weet u dat het een gedoe kan zijn om snel een productieve ontwikkelingsomgeving in te stellen. Vanuit de Yeoman-box bewerkt, bekijkt en herlaadt u met geen van de bovengenoemde problemen. vrolijk gezicht.
scripts / views / todo-view.js/ * global backboneApp, Backbone, JST * / backboneApp.Views.TodoView = Backbone.View.extend (tagName: 'li', sjabloon: JST ['app / scripts / templates / todo.ejs'], evenementen: ' klik op invoer [type = "checkbox"] ':' toggle ',' dblclick span ':' toggleEdit ',' submit form ':' toggleEdit ', initialize: function () / * ... * /, render: function () / * ... * /, toggle: function () / * ... * /, toggleEdit: function () / * ... * /);
Deze TodoView zal een individueel item vertegenwoordigen. Het zal een zijn met een aantal aangepaste functies voor het afhandelen van klikken, dubbelklikken en gebeurtenissen verzenden, waardoor een gebruiker een actie-item kan bewerken en opslaan.
scripts / templates / todo.ejsgecontroleerd<% %>><%= title %>
Simpel genoeg. We gebruiken enkele eenvoudige Underscore-sjablonen om waarden uit te spuwen en een te schakelen gecontroleerd staat op ons selectievakje.
Onze To Do-applicatie is eigenlijk gedaan! Het is vrij eenvoudig in functionaliteit, maar je moet een idee hebben hoe natuurlijk het is om een toepassing te ontwikkelen met Yeoman en zijn Generator-vrienden. En hoewel de functionaliteit basaal is, waren geen van de technieken die we hier gebruikten 'standaard'. We gebruiken slimme, efficiënte bibliotheken (Sass, Backbone, Underscore) met een fijn afgestemd ontwikkelingsproces (Grunt, LiveReload, Compass) en er waren maar een paar terminalopdrachten voor nodig.
Als je net als ik bent, wil je waarschijnlijk stoppen met de taken van To Do en beginnen met het maken van je eigen applicaties. Als je wilt gaan spelen, ga ervoor! Als je klaar bent met het genereren van een gek persoon, kom dan terug en laat onze To Do-app verzenden.
Laten we dit ding in het water leggen en kijken of ze zweeft! Plaats uw computer NIET in het water. Wacht, zweeft een MacBook Air? Nee, waarschijnlijk niet. Hmm ...
Dat was een gevaarlijke paragraaf. Laten we onze app klaar maken voor productie, veilig en droog.
gruntserver was geweldig, maar het is tijd om zijn broer te ontmoeten, grunt build. We hebben iets eerder over hem gesproken, maar laten we nog een paar details bespreken.
Hier is wat de grunt build taak is gedefinieerd als in uw Gruntfile.js:
grunt.registerTask ('build', ['clean: dist', // Wist je .tmp / en dist / folders 'coffee', // compileert je CoffeeScript-bestanden (indien aanwezig) 'createDefaultTemplate', // Creëert een JS bestand dat uw JST-object instelt 'jst', // Berekent uw 'scripts / sjablonen /' bestanden 'kompas: dist', // Berekent uw Sassiness 'useminPrepare', // Ziet eruit voor die in uw HTML 'imagemin', // Optimaliseert uw afbeeldingen! 'htmlmin', // Verkleurt uw HTML-bestanden 'concat', // Taak die wordt gebruikt om uw JS en CSS 'cssmin' samen te voegen, // Minimaliseert uw CSS-bestanden 'uglify', // Taak die wordt gebruikt om uw JS 'kopie' te verkleinen, // Kopieert bestanden van .tmp / en app / naar dist / 'rev', // Creëert unieke hashes en hernoemt uw nieuwe JS / CSS-bestanden 'usemin' // Werkt de verwijzingen in uw HTML bij met de nieuwe bestanden]) ; Dus dat ding is behoorlijk legitiem. Al deze taken worden binnenin gedefinieerd Gruntfile.js, dus voel je vrij om te porren en te tweaken om de build van je applicatie aan te passen. Het is zeer waarschijnlijk dat u helemaal geen aanpassingen hoeft te doen, maar het is er als dat nodig is.
Oh, een ander ding. grunt build is eigenlijk ingepakt in een andere taak.
knorrenGewoon aan het rennen knorren zal het uitvoeren standaard taak:
grunt.registerTask ('standaard', ['jshint', 'test', 'build']); Die eerste twee taken, jshint en test zijn gemakkelijk over het hoofd te zien bij het haasten van een app de deur uit, maar zijn erg belangrijk.
De jshint taak zal uw raadplegen .jshintrc bestand om uw voorkeuren te leren kennen en scan vervolgens al uw JS-bestanden om er zeker van te zijn dat uw regels worden nageleefd. Raadpleeg de JSHint-documentatie voor een volledig overzicht van uw opties met JSHint.
De test taak ziet er als volgt uit:
grunt.registerTask ('test', ['clean: server', 'coffee', 'createDefaultTemplate', 'jst', 'compass', 'connect: test', 'mocha']); Het doet in feite voldoende om uw applicatie voor uw testraamwerk, Mocha, te maken en te gebruiken om uw tests uit te voeren.
Oh rotzooi, tests.
Naast je deur app / en dist / mappen, deze kleine test/ Buckaroo heeft op onze aandacht gewacht. Aww.
Als je dat opent, zie je het test/ heeft zijn eigen bower.json en index.html, evenals een spec / directory. Uw tests zullen afhankelijk zijn van die van henzelf, de Chai Assertion Library en het Mocha-testraamwerk.
Breid dat uit spec / map en je ziet een test.js bestand dat er ongeveer zo uitziet:
/ * globaal beschrijven, het * / 'gebruik strikt'; (functie () beschrijven ('Geef het wat context', function () beschrijven ('misschien een beetje meer context hier', function () it ('zou hier een paar beweringen moeten uitvoeren', function () ); ););) (); Ok, het lijkt erop dat we een pull-verzoek kunnen gebruiken om wat grammatica te corrigeren. Iemand?
Als u nog niet eerder uw eigen tests hebt geschreven, ziet u termen als beschrijven, het, voor, beforeEach, na, en na elke pop-up. beschrijven is een verpakking voor een groep gerelateerde tests, ____Elk zijn optionele functies die zullen worden uitgevoerd voor of na uw test (en) en elk het is een specifieke test.
Probeer een gromtest om alle magie te zien ontvouwen.
Je zou rond moeten spelen en kijken of je wat tests kunt schrijven voor onze To Do-applicatie. Een paar ideeën voor testgevallen kunnen zijn:
Er is nog maar één ding te doen.
$ grunt
Je zou onze favoriete woorden moeten zien: Klaar, zonder fouten.
Yeoman is nog vrij jong; hij is er net een geworden! Het gaat nu best goed en ze worden alleen maar beter. Echter, net als alle eenjarigen, leert Yeoman nog steeds te lopen zonder te vallen en te praten zonder te kwijlen. Misschien kom je een bug of twee tegen. Denk in tijden als deze aan hem als je schattige neefje. Hij heeft positieve rolmodellen nodig in zijn leven, dus help hem te leren!
Dat kreeg echte kinderboeken, heel snel. Ik zal het een beetje opgroeien: er zijn beestjes en we hebben je hulp nodig om de doody eruit te persen (ik zei "een beetje"). Zelfs als het geen bug is, maar je denkt: "Ik weet een VEEL snellere Grunt-plug-in die deze generator zou kunnen gebruiken", rapporteer het aan de juiste tracker van de generator..
Als je meer over Yeoman wilt weten of het team wilt leren kennen, vind je ons op de volgende sites gepeperd.
Als je gewoon vastzit, probeer dan een van de volgende bronnen voor een helpende hand.
Yeoman is slechts een deel van de hele stapel: NPM, Node, Grunt en Bower. Het kan intimiderend zijn als je hier niet bekend mee bent, maar het is cruciaal om niet bang te zijn voor de curve! Leren zal moeten gebeuren, en zoals altijd zal het waarschijnlijk op de harde manier moeten gebeuren voordat het echt blijft hangen.
Psst, als je gebruikt sudo vóór elke opdracht, uitvoeren, niet lopen, naar knooppunt en NPM in 30 seconden. Daar vindt u verschillende scripts die u kunt uitvoeren om controle over uw gebruikersaccount te krijgen. Het zal je ook helpen bij het installeren van Node en NPM als je helemaal opnieuw begint.
Zoals alle tools geloof ik dat Yeoman iets is dat elke ontwikkelaar moet proberen. Als je het een kans geeft en vindt dat het niet geschikt is voor je taak, zouden ik en de rest van het team graag horen waarom. Als je een buddy nodig hebt om je te helpen met je project, kom me dan zoeken. Ik ben altijd beschikbaar via de bovenstaande links of ping me gewoon op Twitter. Ik ben @stephenplusplus of Stephen Sawchuk.
Leuk om je te ontmoeten.
