Share
Volgens yeoman.io: "Yeoman is een robuuste en eigenzinnige set tools, bibliotheken en een workflow waarmee ontwikkelaars snel prachtige, boeiende web-apps kunnen bouwen." Laten we ingaan en precies zien wat dit betekent!
_ .--------------------------. _ | o | _ | Welkom bij Yeoman, | | _ | | dames en heren! | / \ Y / \ o _________________________ | || : | // o / --- \ _ \ / _
Er wordt tegenwoordig hard gewerkt aan het bouwen van web-apps. Er zijn talloze bibliotheken om te gebruiken, patronen, stijlen, rasters, boilerplates, bootstraps ... de lijst gaat maar door! Yeoman is een antwoord op enkele van deze problemen. In plaats van tijd te moeten verspillen aan het in gebruik nemen van een toepassing, doet Yeoman het meeste werk voor u - slechts een paar opdrachten nodig.
De snelste manier om Yeoman te gebruiken is door het volgende script uit te voeren.
krul -L get.yeoman.io | shNotitie: Yeoman wordt ondersteund door OSX, Linux en Windows. Dit proces klokt in ongeveer 10 minuten. In een toekomstige update zal dit installatieproces echter worden gewijzigd.
Dus dat was makkelijk. Wat is er zojuist gebeurd? Veel dingen! De install.sh bestand af ,get.yeoman.io, heeft een kop die precies beschrijft wat er gebeurde.
# * Detecteer Mac of Linux, kies welke pakketbeheerder je moet gebruiken # * Installeer op de Mac zelfgebouwd als het niet aanwezig is # * Installeer deze dan: git optipng jpeg-turbo phantomjs # * Zorg ervoor dat Ruby> = 1.8.7 in de buurt is, installeer zo niet (voor kompas) # * Installeer het nieuwste NodeJS-pakket # * Installeer kompas # * Download Yeoman zip naar een tijdelijke map # * Installeer het als een globale knooppuntmodule
En daar heb je het!
Yeoman is geïnstalleerd als een globale knooppuntmodule, dus open uw TOC (Terminal of Choice) en voer het uit eigenerfde.
De eerste keer dat dit wordt uitgevoerd, wordt er gevraagd of u wilt toestaan dat deze statistieken op uw Yeoman-gebruik blijven staan. Ze hebben zelfs een Google Analytics-accountinstelling om allerlei interessante gebruiksstatistieken bij te houden.
Gewoon aan het rennen eigenerfde vanaf nu zal een lijst met opdrachten worden afgedrukt die beschikbaar zijn om uit te voeren.
Accentsconagua
yeoman initDit is waar de magie van de steigers gebeurt. Voer de volgende opdracht uit voor een standaard steigerapp.
yeoman init
Deze opdracht zal vijf vragen stellen:
Out of the box, hardlopen in het zal HTML5 Boilerplate, en jQuery en Modernizr bevatten. Hier is een meer uitgebreide lijst.
Het zal ook rechtstreeks uit de doos CoffeeScript- en Compass-bestanden compileren!
generatoren zijn de magie achter alle steigers. De in het commando zelf is gebaseerd op een generator. Er is een aparte repository voor hen. Er zijn er al veel beschikbaar, waaronder ruggegraat, gloeiende sintel, en hoekig om er maar een paar te noemen. Om een lijst van al deze te bekijken, voert u gewoon ...
yeoman init --help
Generators vormen een groot deel van Yeoman en zijn bedoeld om te worden gewijzigd en toegevoegd.
Tip: Voor hulp bij het maken van uw eigen generator, raadpleegt u het generatorsgedeelte van de documentatie.Als je je eigen Backbone.js-applicatie wilt maken, kun je gewoon het volgende doen:
mkdir backboneapp && cd backboneapp yeoman init backbone
Dit zal een project bouwen met verschillende boilerplate-modellen, views, collecties, voorgeladen met Lodash, Mocha, jQuery en HTML5 boilerplate.
Je kunt hetzelfde doen met hoekig en gloeiende sintel zoals eerder vermeld.
Er zijn verschillende subgeneratoren ook, waarmee u dingen kunt doen, zoals:
yeoman init backbone: view awesomeView yeoman init backbone: model awesomeModel yeoman init backbone: collection awesomeCollection yeoman init backbone: router awesomeRouter
Dan BAM, je zult wat nieuw hebben codez om mee te werken, in plaats van tijd te verspillen met het herschrijven van boilerplate code!
yeoman bouwenOnder de covers vind je Grunt, een populair framework, gemaakt door Ben Alman (Cowboy), voor het bouwen van JavaScript-applicaties. Het is afhankelijk van a knorren bestand met configuratie-opties die taken configureren om verschillende bewerkingen uit te voeren, zoals pluizen, combineren, verkleinen enz.
Yeoman is bovenop Grunt gebouwd, maar breidt het uit om een aantal nieuwe aanpassingen en functies te bieden. Waaronder:
r.js De configuratie wordt geplaatst binnen een gruntfile.js bestand in de gegenereerde app. Wanneer u klaar bent met de ontwikkeling, voert u het volgende uit om de app te bouwen.
yeoman bouwen
Je nieuw gebouwde app wordt geplaatst binnen een dist / map. Een leuke eigenschap is hoe Yeoman scriptreferenties gebruikt, zoals:
En na het uitvoeren van de build, concat en verkleint u die bestanden tot een enkele script referentie. Dat zijn twaalf HTTP-aanvragen tot één!
Elk van de stappen voor het bouwproces is te vinden in gruntfile.js, die wordt gegenereerd wanneer de app wordt gemaakt. Er zijn ook verschillende build target-opties.
yeoman server Yeoman biedt ook een ingebouwde hostserver om uw app lokaal te testen. LiveReload of eenvoudig kijken naar bestanden als u LiveReload niet hebt, zorgt er ook voor dat, bij het uitvoeren van de server, wijzigingen in bestanden in de app automatisch de browser opnieuw laden met de nieuwe wijzigingen. Standaard is de poort waarop het zal worden uitgevoerd 3051. Door het volgende uit te voeren ...
# Voer dit uit voor de niet-gebouwde versie van de yeoman-server # Of dit voor de builded-versie van de yeoman-server: dist
Een nieuw browswer-venster verschijnt met het draaien van uw app. De server compileert ook koffie- en Sass-items en plaatst deze in een temp directory. U hoeft zich dus geen zorgen te maken over het compileren! Er zijn verschillende andere serverdoelen; zorg ervoor dat je ze bekijkt.
yeoman test Mocha is een populair framework voor het testen van eenheden en is ingebouwd in Yeoman. Wanneer een project een scaffold heeft, een testmap met een index.html bestand is gemaakt met Mocha en Chai voor beweringen. Gewoon rennen:
yeoman test
Yeoman zal dan Mocha tegen PhantomJS uitvoeren, wat een headless webkit-browser is die in Node.js. Dan kunt u gerust nieuwe tests toevoegen aan de index.html het dossier. Het testen van eenheden kan elke toepassing aanzienlijk verbeteren en Yeoman maakt het proces zo eenvoudig mogelijk. Er zijn dus geen excuses meer! Je kunt Jasmine ook gebruiken, als je wilt, door te geven --test-raamwerk jasmijn naar de yeoman init commando.
yeoman installeertOm nieuwe clientbibliotheken in uw applicatie te installeren, gebruikt Yeoman een bibliotheek, genaamd Bower, die is ontwikkeld door een aantal van de mensen op Twitter.
Bower is een pakketbeheerder voor het web. Met Bower kun je gemakkelijk items zoals afbeeldingen, CSS en JavaScript installeren en afhankelijkheden voor je beheren.
Yeoman biedt de volgende opdrachten:
# Installeer elk pakket (en) door spaties gescheiden yeoman jQuery installeren # Deïnstallatie dingen verwijderen yeoman jail # update dingen yeoman update jquery # Installeert onderstrepingsteken ook omdat backbone ervan afhangt yeoman install backbone # Lijst van alle geïnstalleerde dingen die yeoman-lijst # Ga op zoek naar dingen specifiek gebaseerd op een naam yeoman lookup mokka # Ga naar dingen zoeken op basis van een trefwoord yeoman lookup onderstrepingsteken
Bower is een uitstekende toevoeging aan Yeoman en lost het workflowprobleem op van het constant moeten ophalen van bibliotheken bij het bouwen van apps. Het zorgt er ook voor dat ze up-to-date zijn. Hier is een voorbeeld van hoe u Bower kunt gebruiken.
prieel installeren jQuery prieel installeren git: //github.com/maccman/package-jquery.git prieel installeren http://code.jquery.com/jquery-1.7.2.js prieel installeren ./repos/jquery
De apps die met prieel zijn geïnstalleerd, worden opgeslagen in een component.json bestand in de hoofdmap van de applicatie.
Laten we een eenvoudige Backbone-toepassing maken van begin tot einde.
# Een nieuwe app maken yeoman init backbone # Een nieuw model en een verzameling maken yeoman init backbone: modelfoto yeoman init backbone: verzamelfoto's # Maak een aantal nieuwe weergaven voor flickr-openbare foto's yeoman init backbone: bekijk flickr yeoman init backbone: bekijk foto Item # GOLVEN HAND EN VOET VEEL CODE TOE # https://github.com/jcreamer898/yeomanbbapp yeoman server # Bouw ALLE DINGEN! De bouw van de yeoman # Kijk eens naar de nieuwbouw man ... yeoman server: dist
Wow, het is bijna te simpel - en vergeet niet dat je Bash-aliassen kunt maken om deze code verder in te korten. Het moeilijkste was het maken van de voorbeeld-app! Maar dat is het mooie ervan. Yeoman neemt je mee weg van
de boilerplate-code, en stelt je in staat om je uitsluitend op de harde dingen te concentreren!
Als je wilt, bekijk dan de app om te zien hoe het gegaan is. Ik zou vrij goed zeggen.
Yeoman kan het ontwikkelingsproces voor een nieuwe applicatie snel versnellen. In plaats van tijd te verspillen aan het verzamelen van bibliotheken en het schrijven van boilerplate-code, typt u in plaats daarvan een paar opdrachten en bent u klaar voor gebruik! Nog beter, het is open source en geschreven door een paar jongens die je misschien kent!
Genieten!
