Share
Hittills har du lärt dig hur du använder kommandoraden för pakethantering från tredje part, driva upp din främre ändkod, automatisering med uppgiftslöpare, live reloading och webbläsarsynkronisering.
I den här sista handledningen av serien lär du dig att använda kommandoraden för att få dina projekt till en igångsättning genom att bygga upp nya projekt som har all tredje partskod som de behöver, samt Grunt eller Gulp-arbetshantering redan inställd , på bara en stund stunder.
Det finns över tusen olika typer av projekt som du för närvarande kan bygga ut med kommandoraden, men i denna handledning går vi igenom fyra av dem för projekt baserade på:
Stiftelsen har sitt eget CLI (kommandoradsgränssnitt) som är bra för byggnadsställningar av Stiftelsens ramprojekt. Låt oss gå igenom hur du använder Foundation CLI för att skapa ett projekt som använder Compass.
Den första delen av byggnadsställningen av ett nytt stiftprojekt är att installera den nödvändiga CLI. Innan du gör det måste du se till att du har fem förutsättningar installerade på ditt system:
Vi täckte installationen av NodeJS, Git och Bower i Taming 3: e paket, installationen av Ruby var täckt av Power Up Front End Code, och installationen av Grunt-Cli var täckt av Automation med Task Runners.
Efter att du har installerat Ruby måste du installera Kompass och Bundler-ädelstenar med dessa kommandon:
gem installation kompass
gem installeringspaket
Nu kan du gå vidare och installera Foundation CLI med det här kommandot:
gem installation foundation
Nu när som helst vill du starta ett nytt stiftprojekt, öppna en terminal där du vill skapa den och köra kommandot
grunda nytt projektnamn
Då ser du din nyskapande projektmappstruktur genererad, som så:
Härifrån måste du ha en terminal spetsad i din faktiska projektmapp, t.ex. inuti "project_name".
Den "buntar" -pärla som du installerat tidigare används här för att se till att alla nödvändiga bibliotek har installerats. Få allt squared bort genom att köra kommandot:
bunt
Du behöver bara göra detta en gång när du först skapar dina Foundation Compass-projekt.
I webbläsaren ser ditt nya projekt ut så här:
Du är nu redo att starta utveckling på ditt projekt. Det finns en inbyggd Sass-kompilator som kommer att titta på ".scss" -filerna i biblioteket för ändringar och sedan kompilera dem till css för dig. Aktivera det med kommandot:
bunt exec kompass klocka
Yeoman är ett verktyg som utformats uttryckligen för byggnadsställningar av nya projekt. Det fungerar ovanpå NodeJS, integrerar Bower för pakethantering, och använder Grunt eller Gulp för uppgiftslöpning.
Efter installationen av Yeoman är grundprocessen för byggnadsställningar något nytt projekt:
Accentsconagua
yo att skapa ett nytt projekt, t.ex.. yo h5bp Läs mer om Yeoman på: http://yeoman.io/
För att använda Yeoman måste du ha bower, grunt-cli och gulp installerad globalt, vilket du borde ha just nu så länge du har följt alla handledning i serien så långt.
Installera Yeoman globalt med kommandot:
npm installera -g yo
Nu är du redo att hitta generatorer och bygga nya projekt.
För att bygga upp ett Bootstrap-projekt använder vi generator-gulp-bootstrap. Bland annat sätter du dig ihop med Bootstrap-ramen, jQuery & Modernizr, BrowserSync, automatisk Sass-kompilering via LibSass, automatisk JS-linting och bildoptimering.
Installera generatorn globalt med:
[sudo] npm installera -g generator-gulp-bootstrap
Peka på din terminal var du än helst vill bygga upp ditt nya projekt och köra:
yo gulp-bootstrap
Du får en liten skärm så här i din terminal, och du kommer att kunna verifiera att du vill använda Bootstrap och Modernizr:
När generatorn är klar kör du en mappstruktur enligt följande:
För att bygga ditt projekt använd kommandot:
klunk
Att spinna upp en lokal förhandsgranskning med automatisk kompilering och ladda om körning:
gulp klocka
I en webbläsare ser ditt nya Bootstrap-projekt ut så här:
För att bygga upp ett nytt HTML5 Boilerplate-projekt använder vi generator-h5bp.
Installera generatorn globalt med:
[sudo] npm installationsgenerator-h5bp -g
Ställ ut ditt nya projekt med det här kommandot:
yo h5bp
Du får möjlighet att välja om du vill att dokument ska inkluderas i ditt projekt, då kommer generatorn att springa.
Du får då ett nytt HTML5 Boilerplate-projekt som struktureras på följande sätt:
I en webbläsare ser du bara ett enkelt "Hej värld!" -Meddelande, men om du ser koden ser du att du har allt du behöver för att få din HTML5-sida på gång:
Web Starter Kit är ett projekt av Google, utformat som "panna och verktyg för utveckling av flera enheter". Du kan läsa allt om dess funktioner på: https://developers.google.com/web/starter-kit/
För att bygga upp det ska vi använda generator-mobil.
Installera generatorn globalt med:
[sudo] npm installera yeoman / generator-mobile -g
Ställ ut ditt GWSK-projekt med kommandot:
yo mobil
I din terminal svarar du på en serie frågor baserat på vilket ditt projekt kommer att genereras:
När generatorn har slutfört, kommer ditt nya projekt att ha denna struktur:
För att öppna en BrowserSync-driven localhost-förhandsgranskning, kör det här kommandot:
gulp tjäna
Förhandsvisningen av din webbplats kommer att se ut så här:
Notera: Efter att ha kört kommandot för gulp server kan du få ett felmeddelande som säger att webbläsarsynkronisering inte kunde hittas. Om så är fallet, installera det manuellt i din mapp med det här kommandot:
[sudo] npm installera webbläsarsynkronisering
För att bygga hela projektet kör detta kommando:
klunk
För att få feedback om hastigheten på ditt projekt kör:
gulp pagespeed
Detta kommando kommer att ge dig en läsning av "pagespeed" -data i din terminal som så:
Och om du väljer ett av värdalternativen när du ställer upp ditt projekt, publicerar du din webbplats med:
gulp deploy
Det handlar bara om det för den här handledningen - du har nu ett antal verktyg på fingerspetsarna för att komma igång med några vanliga front-end-ramar, allt genom kraften i kommandoraden!
