Share
Så langt har du lært hvordan du bruker kommandolinje for pakkeadministrasjon fra tredjepart, slår opp frontendekoden din, automatiserer med oppgaveløpere, live reloading og nettleser synkronisering.
I denne siste opplæringen av serien lærer du hvordan du bruker kommandolinjen for å få prosjektene dine til en løpende start ved å stille ut nye prosjekter som har all tredjepartskoden de trenger, samt Grunt eller Gulp-oppgavebehandling allerede oppsett , i bare et øyeblikk øyeblikk.
Det er over tusen forskjellige typer prosjekter som du for øyeblikket kan stille ut ved hjelp av kommandolinjen, men i denne opplæringen vil vi gjennomgå fire av dem for prosjekter basert på:
Stiftelsen har sitt eget CLI (kommandolinjegrensesnitt) som er flott for stillas ut av Stiftelsens rammeverk. La oss gå gjennom hvordan du bruker Foundation CLI til å lage et prosjekt som bruker Compass.
Den første delen av stillas ut et nytt stiftelsesprosjekt er å installere den nødvendige CLI. Før du gjør det, må du sørge for at du har fem forutsetninger installert på systemet ditt:
Vi dekket installasjon av NodeJS, Git og Bower i Taming 3parts-pakker, installasjon av Ruby ble dekket i å slå opp Front End Code, og installasjon av Grunt-Cli ble dekket i Automation med Task Runners.
Etter at du har sørget for at Ruby er installert, må du installere Kompass og Bundler-perlene med disse kommandoene:
perleinstallasjonskompass
perle installasjonspakke
Nå kan du gå videre og installere Foundation CLI med denne kommandoen:
perle installasjon fundament
Nå når du vil starte et nytt stiftelsesprosjekt, åpner du en terminal hvor du vil opprette den og kjøre kommandoen
grunnlag nytt prosjektnavn
Du vil da se din nyopprettede prosjektmappestruktur generert, slik som:
Herfra må du ha en terminal spisset i selve prosjektmappen din, f.eks. inne "prosjektnavn".
"Bundler" perlen du installerte tidligere, blir brukt her for å sikre at alle nødvendige biblioteker er installert. Få alt squared bort ved å kjøre kommandoen:
bunt
Du må bare gjøre dette en gang når du først lager dine Foundation Compass-prosjekter.
I nettleseren vil ditt nye prosjekt se slik ut:
Du er nå klar til å starte utviklingen på prosjektet ditt. Det er en innebygd Sass-kompilator som vil se ".scss" -filene i biblioteket for endringer, og deretter kompilere dem til css for deg. Aktiver det med kommandoen:
Bundle Exec Kompass Watch
Yeoman er et verktøy designet eksplisitt for stillas ut nye prosjekter. Det fungerer på toppen av NodeJS, integrerer Bower for pakkehåndtering, og bruker Grunt eller Gulp for oppgavekjøring.
Etter å ha installert Yeoman er den grunnleggende prosessen for stillas noe nytt prosjekt:
Accentsconagua
yo å generere et nytt prosjekt, f.eks. yo h5bp Les mer om Yeoman på: http://yeoman.io/
For å bruke Yeoman må du ha bower, grunt-cli og gulp installert globalt, som du burde ha på dette punktet så lenge du har fulgt alle opplæringene i serien så langt.
Installer Yeoman globalt med kommandoen:
npm installere -g yo
Nå er du klar til å gå og finne generatorer og stillas nye prosjekter.
For å bygge opp et Bootstrap-prosjekt bruker vi generator-gulp-bootstrap. Blant annet setter denne generatoren deg opp med Bootstrap-rammen, jQuery & Modernizr, BrowserSync, automatisk Sass-kompilering via LibSass, automatisk JS-linting og bildeoptimalisering.
Installer generatoren globalt med:
[sudo] npm installer -g generator-gulp-bootstrap
Pek terminalen din uansett hvor du vil sette opp ditt nye prosjekt og kjøre:
yo gulp-bootstrap
Du får en liten skjerm som dette i terminalen din, og du vil kunne bekrefte at du vil bruke Bootstrap og Modernizr:
Etter at generatoren er ferdig, har du en mappestruktur som denne:
For å bygge prosjektet bruker du kommandoen:
gulp
For å spinne opp en lokal forhåndsvisning med automatisk kompilering og gjenopplasting, kjør:
gulp klokke
I en nettleser vil ditt nye Bootstrap-prosjekt se slik ut:
Å bygge et nytt HTML5 Boilerplate-prosjekt vil vi bruke generator-h5bp.
Installer generatoren globalt med:
[sudo] npm installasjonsgenerator-h5bp -g
Still inn ditt nye prosjekt med denne kommandoen:
yo h5bp
Du får muligheten til å velge om du vil at dokumenter skal inkluderes i prosjektet ditt, da generatoren vil kjøre.
Deretter får du et nytt HTML5 Boilerplate-prosjekt som er strukturert slik:
I en nettleser ser du bare en enkel "Hei verden!" -Melding, men hvis du ser koden, vil du se at du har alt du trenger for å få HTML5-nettstedet ditt på gang:
Webstarter Kit er et prosjekt av Google, designet som "boilerplate & tooling for multi-device development". Du kan lese alt om dens funksjoner på: https://developers.google.com/web/starter-kit/
For å stille det ut bruker vi generator-mobil.
Installer generatoren globalt med:
[sudo] npm installerer yeoman / generator-mobile -g
Still ut GWSK-prosjektet ditt med kommandoen:
yo mobil
I din terminal svarer du på en serie spørsmål basert på hvilket prosjektet ditt vil bli generert:
Når generatoren er ferdig, vil ditt nye prosjekt ha denne strukturen:
For å åpne en BrowserSync drevet lokalhost forhåndsvisning, kjør denne kommandoen:
Gulp serverer
Forhåndsvisning av nettstedet ditt vil se slik ut:
Merk: Etter at du har kjørt kommandoen Gulp server, kan du se en feilmelding som sier at nettleser-synk ikke ble funnet. I så fall må du installere den manuelt i mappen din med denne kommandoen:
[sudo] npm installerer nettlesersynkronisering
For å bygge hele prosjektet, kjør denne kommandoen:
gulp
For å få tilbakemelding på hastigheten på prosjektet ditt kjøres:
gulp sidespeed
Denne kommandoen gir deg en utskrift av "sidespeed" -data i terminalen din slik:
Og hvis du valgte et av hostingalternativene mens du stiller opp prosjektet ditt, publiserer du nettstedet ditt med:
gulp distribuere
Det handler bare om det for denne opplæringen - du har nå en rekke verktøy på fingertipsene dine for å komme i gang med noen vanlige front-end-rammer, alt gjennom styrken til kommandolinjen!
