Share
En ting er sikkert: ganger har sikkert endret seg. Ikke for lenge siden var front-end-utvikling, men ikke enkel, håndterlig. Lær HTML, litt CSS, og du er på vei. I disse dager, for mangel på bedre ord, er det imidlertid langt flere variabler å jonglere.
Preprosessorer, ytelse tuning, testing, bildeoptimalisering og minifisering representerer, men bare noen få av de sentrale faktorene som den moderne utviklingsprodusenten må huske på.
For eksempel, selv om det er lett å bruke, skiller CSS ikke i orden godt. Og mens det er kraftig, kan JavaScript til tider være et styggt, vanskelig språk å jobbe med. Så er det ytelsesaspektet; Ikke lenger er vi bare å designe for Internet Explorer og Firefox. Nei, i disse dager har vi et myriade av nettlesere, enheter, resolusjoner og tilkoblingshastigheter som skal vurderes når du utvikler nye applikasjoner.
Å si at vårt er en utrolig tøff industri ville være underdrivelsen av århundret.
Oppsiden er at for hver veiblokke er det sikkert gitt løsninger.
Oppsiden er at for hver veiblokke er det sikkert gitt løsninger av medlemmer av samfunnet. Vurder CSS skaleringsproblemet; Vel, preprosessorer, som Sass, Mindre og Stylus, ble introdusert for å gjøre livet enklere. Hva med det ekle CSS3-nettleser-prefikseringsproblemet? Kompasset tar seg av det! Og JavaScript-dilemmaet? Nok en gang, CoffeeScript og, nå, TypeScript til redning! Det eneste problemet er at hver ny løsning krever sitt eget system og prosess. Som man kanskje regner med, kan dette i betydelig grad komplisere arbeidsflyten din. Nå har vi flere Terminal-faner åpne, hver overvåker en delmengde av filene i prosjektene våre, lytter etter endringer. Og det er bare toppen av isfjellet. Vi har ennå ikke berørt arbeidsflyten, kodet beste praksis, bildeoptimalisering, testing og utvikling av en automatisert byggeprosess. Selv om du skriver om alle disse trinnene, forkortes pusten! Ville det ikke vært fantastisk hvis noen innpakket alle disse preprosessorer og beste praksis i en enkel å bruke pakke?
Laget av noen av de vennlige folkene på Google (inkludert Paul Irish og Addy Osmani), er Yeoman løsningen på dine problemer. Som kjerneteamet legger det, tilbyr Yeoman en oppfylt arbeidsflyt for å få deg i gang med nye prosjekter så raskt som mulig. Men hva betyr dette egentlig? Vel, det gir muligheten til å bygge opp nye prosjekter, samt de nødvendige rammeverk og testverktøy. Hva dette egentlig betyr, er mindre kjedelig konfigurasjon, og mer skapelse.
For å komme i gang med Yeoman må vi først installere den fra kommandolinjen. Kjør følgende kommando:
curl -L get.yeoman.io | bash
Dette skriptet vil utføre forskjellige ting, inkludert installasjon av nødvendige biblioteker for Yeoman å gjøre jobben sin. Du vil sannsynligvis finne ut at det krever en håndfull skritt fra din side, men ikke bekymre deg; det vil fortelle deg nøyaktig hva som må gjøres!
Når installasjonen er fullført, kjør yeoman for å se hva som er tilgjengelig. Du finner en rekke alternativer, for eksempel i det, for initialisering av et nytt prosjekt, bygge, for å skape en spesiell, optimalisert dist mappe for distribusjon, og installere, som gjør prosessen med å håndtere pakkehåndtering så enkelt som mulig.
Hvis du vil vite mer om hva hver alternativ gjør, legger du til
--hjelptil kommandoen:yeoman init --hjelp.
La oss lage et nytt prosjekt med Yeoman. Opprett en ny katalog på skrivebordet ditt, cd til det fra terminalen, og løp:
yeoman init
På dette punktet blir du bedt om en rekke spørsmål.
Disse spørsmålene gir deg muligheten til å konfigurere ditt nye prosjekt rett ut av boksen. For nå, velg "Nei" til hvert spørsmål.
Hvis du foretrekker å omgå disse spørsmålene i fremtiden, kjører du i stedet
yeoman init quickstart. Dette vil forberede en ny applikasjon, med Modernizr, jQuery og HTML5 Boilerplate baket inn.
Med den eneste kommandoen stiller Yeoman øyeblikkelig et nytt prosjekt for deg. Ikke vær overveldet av alle disse filene, skjønt; Hvis de ikke ble generert for deg, ville du til slutt lage dem manuelt. Tenk bare på Yeoman som den nyttige roboten, hvem gjør alt manuell arbeidskraft for deg.
"Yo mann; gå hente meg jQuery og Modernizr! "
Nå som vi har et nytt prosjekt, la oss starte en forhåndsvisningsserver, og begynne å overvåke søknaden om endringer.
yeoman server
Umiddelbart blir Google Chrome lansert, viser prosjektet ditt (også, ingen sikkerhetsfeil). Vel, det er praktisk, men som du raskt finner, er det mye, mye mer å se. Plasser nettleseren og redaktøren side ved side, og prøv følgende:
Endre h1 tagtekst, og se det øyeblikkelig oppdatere i nettleseren, uten oppdatering. Yeoman til din tjeneste! Den oppnår dette, via LiveReload Google Chrome-utvidelsen, men hvis det ikke er installert, vil en tilbakebetalingsprosessprosess bli brukt.
Endring main.css til main.sass (eller main.scss, hvis det er din preferanse), og nyt øyeblikkelig kompilering og oppdatering i nettleseren. For å teste det, prøv å lage og bruke en variabel.
// main.sass $ textColor: # 666 kroppsfarge: $ textColor
Hyggelig! Nullstillingsoppsett kreves. Du kan nå skille stilarkene dine etter behov og importere dem til main.sass.
// main.sass @import 'grid' @import 'knapper' @import 'modul'
Hver gang en fil er lagret, vil Yeoman automatisk rekompilere Sass til vanlig CSS, og oppdatere nettleseren.
Hvis du er en Sass-fan, så er det sannsynlig at du også foretrekker det gode Kompass-rammeverket. Ingen bekymringer; Yeoman er glad for å forplikte seg. Kompassstøtte er allerede tilgjengelig; bare importere de aktuelle modulene, og fortsett som vanlig.
// main.sass @import 'kompass / css' * + boks størrelse (grenseboks) .boksbredde: 200px + overgang (bredde 1s) &: sveverbredde: 400px
Hvis du ennå ikke er en preprocessor konverter, må du innrømme: dette er betydelig bedre enn alternativet:
* -webkit-box-dimensjonering: border-box; -moz-box-size: border-box; boks-størrelse: border-box; .box width: 200px; -webkit-overgang: bredde 1s; -moz-overgang: bredde 1s; -ms-overgang: bredde 1s; -o-overgang: bredde 1s; overgang: bredde 1s; .box: svever bredde: 400px;
JavaScript er bare fint og dandy, men noen føler at CoffeeScript gir en betydelig renere syntaks som fyller i mange av hullene i språket (minst visuelt).
Innen scripts / katalog, eventuelt opprett en ny mappe, kaffe/, og legg til din første CoffeeScript-fil: person.coffee.
# skript / kaffe / person
Lagre filen, og, som magi, komprimerer Yeoman det umiddelbart til vanilj JavaScript, og plasserer den nye filen direkte i foreldrene scripts / katalogen. Se for deg selv:
// skript / person.js var Person; Person = (funksjon () funksjon Person () returperson;) ();
Perfekt, og enda viktigere, uanstrengt!
Hvis du trenger å endre katalogstrukturen på noen måte, kan du se i
gruntfile.jsfilen i roten til søknaden din. Bak kulissene er Ben Almans Grunt-verktøy det som konfigurerer kompileringen.
På dette tidspunktet har Yeoman gitt oss stor fleksibilitet. Med det enkle yeoman init kommandoen, kan du nå stile nettsteder med Sass, kode i CoffeeScript, og, når du gjør endringer, kan du umiddelbart se oppdateringene som gjenspeiles i nettleseren. Men vi er ikke ferdige ennå! Ikke engang i nærheten.
Yeoman utnytter en kraftig pakkeleder for Internett, kalt Bower. Hva er en pakkebehandling? Vel, hvis du fremdeles manuelt laster ned, for eksempel Underscore-biblioteket fra underscorejs.org, så gjør du det feil. Hva skjer når biblioteket oppdateres noen måneder senere? Vil du manuelt laste ned biblioteket manuelt? Tid er penger; så la Yeoman gjøre jobben for deg.
La oss trekke Underscore inn i prosjektet vårt.
yeoman installere understreking
Yeoman vil svare på denne kommandoen ved å laste ned den nyeste versjonen av biblioteket, og plassere den i en ny selger katalogen. Nå er den klar til å bli brukt!
Men, hva hvis vi ikke er helt sikker på hva navnet på aktivaet vi trenger er? I disse situasjonene kan vi henvise til yeoman søk. Uten å overføre noen argumenter, vil Yeoman returnere en liste over alle aktiva som er tilgjengelige for installasjon. La oss søke etter de populære normalize.css prosjekt, av Nicolas Gallagher.
Husk: Bower er ikke utelukkende for JavaScript-spesifikke eiendeler.
yeoman søk normalisere
På tidspunktet for denne skrivingen skal to prosjekter returneres:
Det ser ut som normal-css er den vi vil ha.
yeoman installere normalisere-css
Importer det nå på samme måte som du normalt ville:
Alternativt kan du omdøpe filen til normalize.scss, og importer den til din main.sass fil.
// main.sass @ import '... / scripts / vendor / normalize-css / normalize'
Det finnes en rekke andre Bower-spesifikke kommandoer som du vil huske:
Accentsconagua
yeoman avinstallere jquery - Avinstaller en pakke.yeoman update jquery - Oppdater biblioteket til den nyeste versjonen.yeoman list - Liste over alle installerte pakker.Hvis testingen ikke er en del av arbeidsflyten din, bør det være! Hva kan være bedre enn en robot som automatisk verifiserer arbeidet ditt etter hver lagring? Heldigvis gjør Yeoman det utrolig enkelt å teste dine applikasjoner. Ut av boksen er det populære Mocha-rammen og PhantomJS (headless Webkit) tilgjengelig, men det er lett konfigurerbart, hvis du foretrekker et annet verktøy, for eksempel Jasmine. I tillegg tilbyr den Chai påstandsbiblioteket, som du raskt vil vokse til å elske.
Åpne tester / indeks.html fil. Mot bunnen ser du et par prøveforsøk som tilbys. Gå videre og slett dem, og opprett en ny testfil: spec / person.js. Her er en test for å komme i gang.
// test / spec / person.js beskriver ('En person', funksjon () det ('burde ha en alder over 0', funksjon () var person = nytt Personnavn: 'Jeffrey', alder: 27 forventer (persons.age) .to.be.above (0);;); Hvis du foretrekker å bruke Chai's (et påstandsbibliotek) bør grensesnitt, gå tilbake til index.html, og endre Forvent = Chai.expect til bør = chai.should (). Nå kan du oppdatere din spesifikasjon, slik at den leser:
person.age.should.be.above (0);
Hvilken metode du velger, er helt opp til deg. Det er ikke noe riktig valg; Bare preferanser.
For å kjøre denne testen, gå tilbake til Terminal, og skriv:
yeoman test
Som forventet, må testen mislykkes med meldingen: "Kan ikke finne variabel: Person."Det er en sviktende test, men enda viktigere, det fungerer - vi tester! Fordi Yeoman utnytter det fantastiske PhantomJS-verktøyet (headless Webkit), kan disse testerne til og med kjøre uten nettleseren.
Hvis du foretrekker å skrive testene dine i CoffeeScript, må du gjøre et par tweaks til din gruntfile.js. Begynn med å legge til en ny kompilere protestere mot kompass oppgave. Innenfor dette objektet, spesifiser filene som skal settes på. I dette tilfellet lærer vi Grunt å kompilere alle CoffeeScript-filer innenfor test / spec / kaffe.
// Kaffe til JS kompilering kaffe: dist: src: 'app / scripts / ** / *. Kaffe', dest: 'app / scripts', kompilere: files: "test / spec / test / spec / kaffe / *. kaffe "
Det siste trinnet er å fortelle Grunt å holde øye med den katalogen. Når en fil er lagret, skal den kompileres, tilsvarende.
Finn se oppgave, og oppdatere kaffe objekt, slik som:
# Tweet.text 