Share
En sak är säker: gånger har det säkert ändrats. Inte för länge sen var framkörningsutveckling, men inte enkel, hanterbar. Lär dig HTML, lite CSS, och du är på väg. Dessa dagar, men för brist på bättre ord finns det många fler variabler att jonglera.
Förprocessorer, prestandatestning, testning, bildoptimering och minifiering representerar men bara några av de viktigaste faktorerna som den moderna frontend-utvecklaren måste tänka på.
Till exempel, även om det är lätt att använda, skala CSS verkligen inte bra. Och, samtidigt som det är kraftfullt, kan JavaScript ibland vara ett fult, svårt språk att arbeta med. Sedan är det prestationsaspekten; inte längre designar vi bara för Internet Explorer och Firefox. Nej, i dag har vi en rad olika webbläsare, enheter, resolutioner och anslutningshastigheter att överväga när du utvecklar nya applikationer.
Att säga att vårt är en otroligt tuff industri skulle vara underdrivet av seklet.
Uppsidan är att för varje vägblock har vi säkert fått lösningar.
Uppsidan är att för varje vägblock har lösningar verkligen tillhandahållits av medlemmar i samhället. Tänk på CSS-skaleringsproblemet. Tja, preprocessorer, som Sass, Mindre och Stylus introducerades för att drastiskt göra våra liv enklare. Vad sägs om den otäcka CSS3-webbläsarens prefixningsproblem? Kompass tar hand om det! Och JavaScript-dilemma? Återigen, CoffeeScript och nu, TypeScript till räddningen! Det enda problemet är att varje ny lösning kräver sitt eget system och process. Som man kan förvänta sig över tiden kan detta väsentligt komplicera ditt arbetsflöde. Nu har vi flera Terminal flikar öppna, var och en övervakar en delmängd av filerna inom våra projekt, lyssnar på förändringar. Och det är bara toppen av isberget. Vi har ännu inte berört arbetsflödet, kodat bästa praxis, bildoptimering, testning och utveckling av en automatiserad byggprocess. Även skriva om alla dessa steg minskar andan! Skulle det inte vara fantastiskt om någon förpackade alla dessa förprocessorer och bästa praxis till ett lättanvänt paket?
Skapad av några av de vänliga folket på Google (inklusive Paul Irish och Addy Osmani), är Yeoman lösningen på dina problem. Som kärnteamet lägger det, erbjuder Yeoman ett uppfattat arbetsflöde för att få dig igång med nya projekt så fort som möjligt. Men vad betyder det här egentligen? Tja, det erbjuder möjligheten att bygga upp nya projekt, samt de nödvändiga ramarna och testverktygen. Vad detta i huvudsak betyder är mindre krånglig konfiguration och mer skapande.
För att komma igång med Yeoman måste vi först installera det från kommandoraden. Kör följande kommando:
curl -L get.yeoman.io | våldsamt slag
Detta skript kommer att utföra olika saker, inklusive att installera nödvändiga bibliotek för Yeoman att göra sitt jobb. Du kommer troligen att finna att det kräver en handfull steg från din sida, men oroa dig inte; det kommer att berätta exakt vad som behöver göras!
När installationen är klar kör du hemmansägare för att se vad som är tillgängligt. Du hittar en mängd olika alternativ, till exempel i det, för att initiera ett nytt projekt, bygga, för att skapa en speciell, optimerad dist mapp för distribution, och Installera, vilket gör processen att hantera pakethantering så enkel som möjligt.
För att få veta mer om vad varje alternativ gör, lägg till
--hjälptill kommandot:yeoman init - help.
Låt oss skapa ett nytt projekt med Yeoman. Skapa en ny katalog på skrivbordet, CD till det från terminalen och springa:
yeoman init
Vid denna tidpunkt får du en handfull frågor.
Dessa frågor ger dig möjligheten att konfigurera ditt nya projekt direkt ur rutan. För nu väljer du "Nej" för varje fråga.
Om du föredrar att kringgå dessa frågor i framtiden kör du istället
yeoman init quickstart. Detta kommer att förbereda en ny applikation, med Modernizr, jQuery och HTML5 Boilerplate bakas in.
Med det enda kommandot ställer Yeoman omedelbart ett nytt projekt för dig. Bli inte överväldigad av alla dessa filer. om de inte genererades för dig så skulle du så småningom skapa dem manuellt. Tänk bara på Yeoman som den hjälpsamma roboten, vem gör allt manuell arbetskraft för dig.
"Ja, man; hämta mig jQuery och Modernizr! "
Nu när vi har ett nytt projekt, låt oss starta en förhandsgranskningsserver och börja övervaka ansökan om ändringar.
yeoman server
Omedelbart startas Google Chrome, visar ditt projekt (även inga fler säkerhetsfel). Tja, det är praktiskt, men som du snabbt hittar finns det mycket, mycket mer att se. Placera din webbläsare och redaktör sida vid sida och försök med följande saker:
Ändra h1 tagg text och titta på det direkt uppdatera i webbläsaren, utan en uppdatering. Yeoman till din tjänst! Det uppnår detta via LiveReload Google Chrome-tillägget, men om det inte är installerat, kommer en återgångsåterladdningsprocess att användas.
Byta main.css till main.sass (eller main.scss, om det är ditt val) och njut av omedelbar sammanställning och uppdatering i webbläsaren. För att testa det, försök att skapa och använda en variabel.
// main.sass $ textColor: # 666 kroppsfärg: $ textColor
Trevlig! Nollställning krävs. Du kan nu separera dina stylesheets efter behov och importera dem till main.sass.
// main.sass @ import 'rutnät' @ import 'knappar' @ import 'modul'
Varje gång en fil sparas, kommer Yeoman automatiskt att kompilera din Sass i vanlig CSS och uppdatera webbläsaren.
Om du är en Sass-fan så är det troligt att du också föredrar den utmärkta kompassramen. Inga problem; Yeoman är glad att tvinga. Kompass support är redan tillgängligt; Importera bara de tillämpliga modulerna och fortsätt som vanligt.
// main.sass @ import 'kompass / css' * + box-dimensionering (border-box) .box bredd: 200px + övergång (bredd 1s) &: svängbredd: 400px
Om du inte är en preprocessor konvertera måste du erkänna: detta är betydligt bättre än alternativet:
* -webkit-box-size: border-box; -moz-box-size: border-box; box-dimensionering: gränsvärde; .box width: 200px; -webkit-övergång: bredd 1s; -moz-övergång: bredd 1s; -ms-övergång: bredd 1s; -o-övergång: bredd 1s; övergång: bredd 1s; .box: svep bredd: 400px;
JavaScript är bara bra och dammigt, men vissa tycker att CoffeeScript ger en betydligt renare syntax som fyller i många av luckorna på språket (åtminstone visuellt).
Inom scripts / katalog, skapa eventuellt en ny mapp, kaffe/, och lägg till din första CoffeeScript-fil: person.coffee.
# skript / kaffe / person
Spara filen, och som magi komprimerar Yeoman omedelbart det till vanilj JavaScript och placerar den nya filen direkt i föräldern scripts / katalogen. Se efter själv:
// skript / person.js var Person; Person = (funktion () funktion Person () Återvänd person;) ();
Perfekt, och ännu viktigare, enkelt!
Om du behöver ändra katalogstrukturen på något sätt, se i
gruntfile.jsfilen i roten till din ansökan. Bakom kulisserna är Ben Almans Grunt-verktyg det som konfigurerar sammanställningen.
Just nu har Yeoman gett oss mycket flexibilitet. Med det enda yeoman init kommandot kan du nu ställa in dina webbplatser med Sass, kod i CoffeeScript och, när du gör ändringar, kan du direkt se uppdateringarna som återspeglas i webbläsaren. Men vi är inte färdiga ännu! Inte ens i närheten.
Yeoman använder en kraftfull paketchef för webben, kallad Bower. Vad är en pakethanterare? Tja, om du fortfarande hämtar manuellt, till exempel Underscore-biblioteket från underscorejs.org, då gör du det fel. Vad händer när biblioteket uppdateras några månader senare? Kommer du manuellt att ladda ner biblioteket igen? Tid är pengar; så låt Yeoman göra jobbet för dig.
Låt oss dra Underscore i vårt projekt.
yeoman installera understrykning
Yeoman kommer att svara på det här kommandot genom att hämta den senaste versionen av biblioteket och placera den i en ny Säljare katalogen. Nu är den redo att användas!
Men, om vi inte är exakta vad namnet på den tillgång vi behöver är? I dessa situationer kan vi hänvisa till yeoman sökning. Utan att lämna några argument kommer Yeoman att returnera en lista över alla tillgångar som kan installeras. Låt oss söka efter den populära normalize.css projekt av Nicolas Gallagher.
Kom ihåg: Bower är inte uteslutande för JavaScript-specifika tillgångar.
yeoman sökning normalisera
Vid tidpunkten för detta skrivande ska två projekt returneras:
Det ser ut som normalisera-css är den vi vill ha.
yeoman installera normalisera-css
Importera det nu på samma sätt som du normalt skulle:
Alternativt kan du byta namn på filen till normalize.scss, och importera den till din main.sass fil.
// main.sass @ import "... / skript / säljare / normalisera-css / normalisera"
Det finns en rad andra Bower-specifika kommandon som du vill komma ihåg:
Accentsconagua
yeoman avinstallera jquery - Avinstallera ett paket.yeoman uppdatering jquery - Uppdatera biblioteket till den senaste versionen.yeoman lista - Lista alla aktuella installerade paket.Om testning inte är en del av ditt arbetsflöde, ska det vara! Vad kan vara bättre än en robot som automatiskt verifierar ditt arbete efter varje spara? Lyckligtvis gör Yeoman det otroligt enkelt att testa dina applikationer. Utanför lådan finns det populära Mocha-ramverket och PhantomJS (headless Webkit), men det är lätt att konfigurera om du föredrar ett annat verktyg, som jasmin. Dessutom erbjuder det Chai-assertionsbiblioteket, som du snabbt växer till kärlek.
Öppna test / index.html fil. Mot botten ser du några provprov som tillhandahålls. Gå vidare och ta bort dem och skapa en ny testfil: spec / person.js. Här är ett test för att komma igång.
/ / test / spec / person.js beskriv ('En person', funktion () it ('ska ha en ålder över 0', funktion () var person = nytt Personnamn: 'Jeffrey' (person.age) .to.be.bove (0););); Om du föredrar att använda Chai's (ett påstående bibliotek) skall gränssnitt, återgå till index.html, och ändra förvänta = chai.expect till bör = chai.should (). Nu kan du uppdatera din spec, så att den läser:
person.age.should.be.above (0);
Vilken metod du väljer är helt upp till dig. Det finns inget korrekt val; bara inställningar.
För att köra detta test, återgå till Terminal och skriv:
yeoman test
Som förväntat ska testet misslyckas med meddelandet: "Kan inte hitta variabel: Person."Det är ett fel test, men viktigare, det fungerar - vi testar! Eftersom Yeoman utnyttjar det utmärkta PhantomJS-verktyget (huvudlösa Webkit) kan dessa tester även köras utan webbläsaren.
Om du föredrar att skriva dina tester i CoffeeScript måste du göra ett par tweaks till din gruntfile.js. Börja med att lägga till en ny sammanställa protestera mot kompass uppgift. Inom det här objektet anger du vilka filer som ska ses. I det här fallet instruerar vi Grunt att sammanställa alla CoffeeScript-filer inom test / spec / kaffe.
// Kaffe till JS kompilering kaffe: dist: src: 'app / scripts / ** / *. Kaffe', dest: 'app / scripts', kompilera: files: "test / spec / test / spec / kaffe / *. kaffe "
Det sista steget är att berätta för Grunt att hålla koll på den katalogen. När en fil sparas ska den kompileras, i enlighet med detta.
Hitta Kolla på uppgift och uppdatera kaffe objekt, som så:
# Tweet.text 