Share
Eén ding is zeker: de tijden zijn zeker veranderd. Nog niet zo lang geleden was front-end ontwikkeling, hoewel niet eenvoudig, beheersbaar. Leer HTML, een beetje CSS, en je komt eraan. Tegenwoordig zijn er echter bij gebrek aan betere woorden veel meer variabelen om te jongleren.
Preprocessors, prestatie-optimalisatie, testen, beeldoptimalisatie en minificatie vertegenwoordigen slechts enkele van de belangrijkste factoren die de moderne front-end ontwikkelaar in gedachten moet houden.
Hoewel CSS eenvoudig in gebruik is, schaalt het zeker niet goed. En hoewel krachtig, kan JavaScript soms een lelijke, moeilijke taal zijn om mee te werken. Dan is er het prestatieaspect; we ontwerpen niet langer alleen voor Internet Explorer en Firefox. Nee, tegenwoordig hebben we een groot aantal browsers, apparaten, resoluties en verbindingssnelheden waarmee we rekening moeten houden bij het ontwikkelen van nieuwe applicaties.
Om te zeggen dat de onze een ongelooflijk moeilijke industrie is, zou de understatement van de eeuw zijn.
Het voordeel is dat voor elke wegversperring oplossingen zijn voorzien.
Het voordeel is dat, voor elke wegversperring, oplossingen zeker zijn geleverd door leden van de gemeenschap. Overweeg het CSS-schalingsprobleem; wel, preprocessors, zoals Sass, Less en Stylus werden geïntroduceerd om ons leven drastisch te vereenvoudigen. Hoe zit het met het vervelende CSS3-browser-voorvoegsel probleem? Compass zorgt daar voor! En het JavaScript-dilemma? Nogmaals, CoffeeScript en, nu, TypeScript te redden! Het enige probleem is dat elke nieuwe oplossing zijn eigen systeem en proces nodig heeft. Zoals te verwachten is, kan dit na verloop van tijd uw workflow aanzienlijk bemoeilijken. Nu hebben we meerdere Terminal-tabbladen geopend, die elk een deelverzameling van de bestanden in onze projecten bewaken en luisteren naar wijzigingen. En dat is nog maar het topje van de ijsberg. We hebben nog niet gesproken over workflow, codering van best practices, beeldoptimalisatie, testen en ontwikkelen van een geautomatiseerd bouwproces. Zelfs schrijven over al deze stappen is mijn adem inkorten! Zou het niet fantastisch zijn als iemand al deze preprocessors en best practices in één gemakkelijk te gebruiken pakket heeft gestopt??
Gemaakt door een aantal van de vriendelijke mensen bij Google (waaronder Paul Irish en Addy Osmani), is Yeoman de oplossing voor uw problemen. Zoals het kernteam zegt, biedt Yeoman een eigenzinnige workflow om je zo snel mogelijk aan de slag te helpen met nieuwe projecten. Maar wat betekent dit eigenlijk? Welnu, het biedt de mogelijkheid om nieuwe projecten te ondersteunen, evenals de nodige kaders en testtools. Wat dit in essentie vertaalt naar is minder vervelend configuratie, en meer creatie.
Om te beginnen met Yeoman, moeten we het eerst installeren vanaf de opdrachtregel. Voer de volgende opdracht uit:
krul -L get.yeoman.io | bash
Dit script zal verschillende dingen doen, inclusief het installeren van de nodige bibliotheken voor Yeoman om zijn werk te doen. U zult waarschijnlijk merken dat het een handvol stappen van uw kant vereist, maar maakt u zich geen zorgen; het zal u precies vertellen wat er moet gebeuren!
Zodra de installatie is voltooid, uitvoeren eigenerfde om te zien wat er beschikbaar is. Je zult een verscheidenheid aan opties vinden, zoals in het, voor het initialiseren van een nieuw project, bouwen, voor het maken van een speciale, geoptimaliseerde dist map voor implementatie, en installeren, wat het proces van omgaan met pakketbeheer zo eenvoudig mogelijk maakt.
Voor meer informatie over wat elke optie doet, voegt u toe
--helpennaar het commando:yeoman init --help.
Laten we een nieuw project met Yeoman maken. Maak een nieuwe map op uw bureaublad, CD naar het van de Terminal, en voer:
yeoman init
Op dit punt wordt u gevraagd een handvol vragen te beantwoorden.
Met deze vragen kunt u uw nieuwe project direct uit de verpakking configureren. Kies voor nu "Nee" voor elke vraag.
Als u in de toekomst deze vragen liever wilt omzeilen, voert u in plaats daarvan uit
yeoman init quickstart. Hiermee wordt een nieuwe applicatie voorbereid met Modernizr, jQuery en HTML5 Boilerplate ingebakken.
Met dat ene commando alleen steekt Yeoman meteen een nieuw project voor je in de steigers. Wees echter niet overweldigd door al deze bestanden; Als ze niet voor u zijn gegenereerd, kunt u ze uiteindelijk handmatig maken. Denk alleen maar aan Yeoman als de behulpzame robot, die al het handenarbeid voor u doet.
"Yo, man; ga me jQuery en Modernizr halen! "
Nu we een nieuw project hebben, laten we een preview-server starten en beginnen we de applicatie te controleren op wijzigingen.
yeoman server
Onmiddellijk wordt Google Chrome gestart en wordt uw project weergegeven (ook geen beveiligingsfouten meer). Wel, dat is handig, maar zoals je snel zult vinden, is er nog veel, veel meer te zien. Plaats uw browser en editor zij aan zij en probeer de volgende dingen:
Verander de h1 tag-tekst, en kijk hoe het onmiddellijk wordt bijgewerkt in de browser, zonder een vernieuwing. Yeoman tot uw dienst! Dit wordt bereikt via de LiveReload Google Chrome-extensie, maar als dat niet is geïnstalleerd, wordt er een fallback-herlaadproces gebruikt.
Verandering main.css naar main.sass (of main.scss, als dat uw voorkeur heeft) en geniet van direct compileren en updaten in de browser. Probeer een variabele te maken en te gebruiken om het uit te testen.
// main.sass $ textColor: # 666 bodykleur: $ textColor
Leuk! Nul instellen vereist. U kunt uw stylesheets nu scheiden, indien nodig, en ze importeren main.sass.
// main.sass @import 'grid' @import 'knoppen' @import 'module'
Elke keer dat een bestand wordt opgeslagen, zal Yeoman automatisch uw Sass opnieuw compileren in reguliere CSS en de browser vernieuwen.
Als je een Sass-fan bent, dan heb je waarschijnlijk ook de voorkeur voor het uitstekende Compass-framework. Maak je geen zorgen; Yeoman is blij om te verplichten. Compass-ondersteuning is al beschikbaar; importeer gewoon de van toepassing zijnde modules en ga gewoon door.
// main.sass @import 'compass / css' * + box-sizing (border-box) .box width: 200px + transition (width 1s) &: hover width: 400px
Als u nog geen preprocessor convert bent, moet u toegeven: dit is aanzienlijk beter dan het alternatief:
* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; .box width: 200px; -webkit-overgang: breedte 1s; -moz-overgang: breedte 1s; -ms-overgang: breedte 1s; -o-overgang: breedte 1s; overgang: breedte 1s; .box: hover width: 400px;
JavaScript is prima en dandy, maar sommigen vinden dat CoffeeScript een aanzienlijk schonere syntaxis biedt die veel van de hiaten in de taal opvult (ten minste visueel).
Binnen de scripts / map, optioneel een nieuwe map maken, koffie/, en voeg je eerste CoffeeScript-bestand toe: person.coffee.
# scripts / coffee / person.coffee class Person
Sla het bestand op en, net als magie, Yeoman compileert het onmiddellijk in vanilla JavaScript en plaatst het nieuwe bestand direct in de bovenliggende map scripts / directory. Kijk zelf maar:
// scripts / person.js var Persoon; Person = (function () function Person () return Person;) ();
Perfect, en nog belangrijker, moeiteloos!
Als u de directorystructuur op enigerlei wijze moet wijzigen, raadpleegt u de
gruntfile.jsbestand in de hoofdmap van uw toepassing. Achter de schermen is het grunt-gereedschap van Ben Alman de configuratie van de compilatie.
Alleen al op dit punt heeft Yeoman ons veel flexibiliteit gegeven. Met die single yeoman init opdracht, kunt u uw websites nu stijlen met Sass, code in CoffeeScript, en terwijl u wijzigingen aanbrengt, ziet u meteen dat de updates in de browser worden weergegeven. Maar we zijn nog niet klaar! Niet eens in de buurt.
Yeoman maakt gebruik van een krachtige pakketbeheerder voor het web, genaamd Bower. Wat is een pakketbeheerder? Nou, als je nog steeds handmatig downloadt, bijvoorbeeld de Underscore-bibliotheek van underscorejs.org, dan doe je het verkeerd. Wat gebeurt er als de bibliotheek een paar maanden later wordt bijgewerkt? Wilt u de bibliotheek handmatig opnieuw downloaden? Tijd is geld; dus laat Yeoman het werk voor je doen.
Laten we Underscore in ons project trekken.
de onderlegger van yeoman installeert
Yeoman zal op deze opdracht reageren door de nieuwste versie van de bibliotheek te downloaden en deze in een nieuwe te plaatsen verkoper directory. Nu is het klaar om te worden gebruikt!
Maar wat als we niet precies zeker weten wat de naam is van de asset die we nodig hebben? In deze situaties kunnen we verwijzen naar het zoeken naar joden. Zonder enige argumenten door te geven, zal Yeoman een lijst retourneren met alle items die beschikbaar zijn om te installeren. Laten we naar het populaire zoeken normalize.css project, door Nicolas Gallagher.
Let op: Bower is niet exclusief voor JavaScript-specifieke items.
het zoeken naar een jodendom normaliseert
Op het moment van schrijven moeten twee projecten worden geretourneerd:
Het lijkt op normaliseren-css is degene die we willen.
yeoman installeert normalize-css
Importeer het nu op dezelfde manier als u normaal zou doen:
U kunt ook de naam van het bestand wijzigen in normalize.scss, en importeer het in uw main.sass het dossier.
// main.sass @import '... / scripts / vendor / normalize-css / normalize'
Er zijn verschillende andere Bower-specifieke opdrachten die u wilt onthouden:
Accentsconagua
yeoman jailure verwijderen - Verwijder een pakket.jubileum update van de jager - Update bibliotheek naar de nieuwste versie.lijst met joden - Lijst van alle momenteel geïnstalleerde pakketten.Als testen nog geen deel uitmaakt van uw workflow, zou dat moeten zijn! Wat is er mooier dan een robot die na elke opslag automatisch uw werk verifieert? Gelukkig maakt Yeoman het ongelooflijk eenvoudig om je applicaties te testen. Out of the box, het populaire Mocha-framework en PhantomJS (headless-webkit) zijn beschikbaar, hoewel het eenvoudig configureerbaar is, als u de voorkeur geeft aan een andere tool, zoals Jasmine. Bovendien biedt het de Chai assertion-bibliotheek, waar je snel van zult gaan houden.
Open de proeven / index.html het dossier. Onderaan zie je een aantal voorbeeldtests. Ga je gang en verwijder deze en maak een nieuw testbestand aan: spec / person.js. Hier is een test om je op weg te helpen.
// test / spec / person.js beschrijven ('A Person', function () it ('should have a age over 0', function () var person = new Person name: 'Jeffrey', leeftijd: 27 verwachten (person.age) .to.be.boven (0););); Als u liever Chai's gebruikt (een bibliotheek met beweringen) moeten interface, keer terug naar index.html, en veranderen verwachten = chai.expect naar should = chai.should (). Nu kunt u uw specificatie bijwerken, zodat deze luidt:
person.age.should.be.above (0);
Welke methode u kiest, is geheel aan u. Er is geen juiste keuze; alleen voorkeuren.
Om deze test uit te voeren, gaat u terug naar de Terminal en typt u:
yeoman test
Zoals verwacht, zou de test moeten mislukken met de boodschap: "Kan variabele niet vinden: Persoon."Het is een mislukte test, maar wat nog belangrijker is, het werkt - we testen! Omdat Yeoman gebruik maakt van de uitstekende PhantomJS-tool (headless-webkit), kunnen deze tests zelfs zonder de browser worden uitgevoerd.
Als u liever uw tests in CoffeeScript schrijft, moet u een paar wijzigingen aanbrengen in uw gruntfile.js. Begin met het toevoegen van een nieuw compileren bezwaar tegen de kompas taak. Geef in dit object de bestanden op die moeten worden bekeken. In dit geval geven we Grunt de opdracht om alle CoffeeScript-bestanden te compileren test / spec / coffee.
// Coffee to JS-compilatiekoffie: dist: src: 'app / scripts / ** / *. Coffee', dest: 'app / scripts', compileer: files: "test / spec /": " test / spec / koffie / *. koffie "
De laatste stap is om Grunt te vertellen dat hij die map in de gaten moet houden. Wanneer een bestand wordt opgeslagen, moet het dienovereenkomstig opnieuw worden gecompileerd.
Vind de kijk maar taak en werk het koffie object, zoals zo:
# Tweet.text 