Share
Webstarter Kit er et nytt Google-initiativ; en del av sitt oppdrag for å strømlinjeforme arbeidsflyten for webutvikling, samtidig som de forespråker beste praksis som de foreslår i Googles Web Fundamentals.
I skrivende stund har Web Starter Kit eksistert bare noen få dager, lansert som en offentlig repo på Github. Det har umiddelbart fått trekkraft i webutviklingssamfunnet, og raskt slår det øverste stedet i Githubs trending repositories.
Det er mange biblioteker og rammer rundt disse dager, men Web Starter Kit er ganske spennende og vel verdt å utforske. I dette innlegget går jeg gjennom flere av hovedtrekkene og viser også hvordan du bruker den til ditt neste nye prosjekt. Uten videre, la oss komme i gang!
Som navnet antyder, er Web Starter Kit et utviklingsverktøy sett som utgangspunkt for nye prosjekter. Google, i Github-depotet, beskriver det som:
Et utgangspunkt for multi-device web utvikling
Ved inspeksjon kan du legge merke til at Web Starter Kit trekker inspirasjon fra likes like HTML5 Boilerplate og Yeoman (det kombinerer det beste fra begge disse populære verktøyene). Web Starter Kit leveres med startmaler som er optimalisert både for hastighet og flere enheter.
Vi arbeider aktivt med å levere den beste PageSpeed Insights-poengsummen og rammeprisen som er mulig.
Dessuten omfatter det også en rekke verktøy for å legge til rette for utvikling, inkludert et synkronisert testverktøy, live browser reloader, JavaScript linter, Sass compiler, CSS minifier og et bilde optimaliseringsverktøy. Mye som i Yeoman, er disse verktøyene forhåndskonfigurert, slik at vi kan starte utviklingen uten å kaste bort tiden på konfigurasjonen.
Du kan hente filene fra Googles repo og bare laste dem ned, men for å fullt ut kunne bruke Web Starter Kit for ditt nye prosjekt, vil du bli bedt om å ha følgende verktøy installert på systemet ditt:
Git: Som nevnt ovenfor er Web Starter Kit-prosjektet vert for Github. Du finner det slankere å ta tak i depotet gjennom git klon kommandoen i stedet for å laste ned Zip-pakken. Hvis du bruker Github-appen, trykker du på Klon i skrivebordet knappen fra repo siden:
Ikke sikker på hva git handler om? sjekk ut Git for designere på Tuts + Code.
node.js: Mange av verktøyene du vil støte på i Web Starter Kit, for eksempel JSLinter, er bygget på toppen av Node.js. Og de vil bli installert gjennom Node Package Manager (NPM). Du kan referere til Installere nod og NPM, for ytterligere hjelp.
Ruby og Sass: Web Starter Kit bruker gulp-ruby-sass til å kompilere Sass i CSS, noe som krever at både Ruby og Sass jobber. For brukere av OS X og Linux, har du allerede installert Ruby. Windows-brukere; bruk RubyInstaller for å installere Ruby. Når Ruby er installert, kjør perle installasjon sass fra kommandoprompten for å installere Sass.
For mer informasjon om installering av Ruby og Sass, ta en titt på Mastering Sass: Leksjon 1.
Gulp: å bruke Gulp til å håndtere mange av oppgavene som trengs under utviklingen, vil virkelig hjelpe. Med Node.js allerede på systemet, installerer du Gulp med følgende kommando:
npm install-g gulp
Til slutt, sørg for git og NPM kommandoer er tilgjengelige. Skriv inn kommandoen nedenfor for å teste om git og NPM fungerer.
git - versjon && npm -v
Disse kommandoene skal svare med git og NPM versjoner, som følger.
Ok, for å komme i gang, naviger til katalogen hvor du vil ha prosjektet ditt (enten navigere ved hjelp av kommandoer eller skriv "cd" og dra deretter den valgte mappen inn i terminalvinduet før du trykker på "enter") og kjør deretter følgende kommando for å klone Web Startpakke prosjektet:
git klon https://github.com/google/web-starter-kit.git
Deretter endrer du den nåværende katalogen til mappen "Web-starter-kit" der webstarter-filene ligger.
cd-web-startpakke
I denne mappen, web-starter-kit /, du vil finne:
Accentsconagua
app /; Dette er mappen der alle de ikke-kodede kildekoden er plassert.package.json; engasjere avhengighetene.gulpfile.js; inneholder konfigurasjonen for å kjøre Gulp-oppgave.
Som nevnt, er Web Starter Kit avhengig av en rekke Node-pakker, inkludert Gulp plugins, for å kjøre flere byggeprosesser. Så det neste du må gjøre er å installere Node-pakkene som er spesifisert i filen "package.json". Gjør dette ved å skrive inn følgende kommando:
npm installasjon
En hel haug med Node-pakker vil da bli installert i en navngitt mappe node_modules.
I et nøtteskall, Gulp, ligner Grunt. Begge er "oppgaveløpere" som automatiserer bestemte oppgaver under utvikling, med sikte på å håndtere det harde arbeidet for deg. Normalt må vi spesifisere og konfigurere Gulp-oppgaver innenfor a gulpfile.js, men siden Web Starter Kit har gjort denne jobben for oss, kan vi umiddelbart kjøre Gulp-oppgaver uten å berøre noe.
I løpet av utviklingsprosessen, skriv inn denne kommandoen nedenfor.
Gulp serverer
Denne kommandoen vil aktivere BrowserSync som er blitt innlemmet og konfigurert igulpfile.js. BrowserSync er et praktisk verktøy som gjør at vi kan teste nettstedet synkront over flere nettlesere. Med BrowserSync vil brukerinteraksjon som å bla, klikke og fylle inn innganger reflekteres i sanntid gjennom alle tilkoblede enheter. Dette gjør at vi kan ta noen uoverensstemmelser som kan skje i hver tilkoblet enhet som samspillet skjer. BrowseSync er også bevæpnet med HTTP-server. Ved å kjøre denne kommandoen vil du bli gitt lokal vert adresse hvor du kan få tilgang til nettstedet.
Videre vil BrowserSync overvåke endringer som er gjort i de angitte filene, inkludert HTML, stilark og bilder. Når vi endrer disse filene, vil BrowserSync umiddelbart løse oppgaven som er angitt i gulpfile.js
Når som helst du er klar til å publisere nettstedet ditt, kan du bare kjøre gulp. Denne kommandoen kjører alle Gulp-oppgavene, kompilere prosjektet i en distribusjonspakke i en ny mappe som heter dist / som er klar til å bli overlevert til kunden din.
En detaljert liste over Gulp-oppgaver finnes på Sammendrag av Web Starter Kit-verktøy.
Webstarter Kit gir en stilguide som starter grunnleggende styling av vanlige elementer og komponenter, for eksempel typografi, knapper, koblinger, breadcrumbs, tabeller, ikoner og rutenett. Se gjennom kilden vil du også finne seleksjonene som brukes til å produsere stilene.
Stilguide finner du i app / stilmanual mappe og det er sammenkoblet med stilarkene, så vi kan se stilveiledningen utvikle seg mens stilarket oppdateres. Strålende!
Grunnleggende styling av Utvalgte ikoner i Web Starter Kit Style GuideMerk: Husk å sjekke ut vår serie Alt om stilguider.
Bra gjort! Vi har lastet ned og installert Web Starter Kit sammen med avhengighetene, så du burde nå kunne jobbe med prosjektet ditt.
Alt i alt, Nettstartsett er ganske solid - selv i den nåværende beta-utgivelsen. Malen og verktøyene er godt konfigurert; de jobber ut av esken. Og siden dette prosjektet støttes av Google med strålende utviklere bak det, kan Web Starter Kit raskt bli så populært som Bootstrap eller Foundation. Jeg ser veldig fram til å se hvordan dette prosjektet utvikler seg i fremtiden.
