Share
Tot nu toe heb je geleerd hoe je de commandoregel kunt gebruiken voor pakketbeheer van derden, je front end-code kunt activeren, automatisering met taaklopers, live herladen en browsersynchronisatie.
In deze laatste zelfstudie van de serie leert u hoe u de opdrachtregel kunt gebruiken om uw projecten een vliegende start te geven door nieuwe projecten uit te rusten met alle door hen benodigde code van derde partijen, evenals het taakbeheer van Grunt of Gulp al in te stellen , in slechts enkele ogenblikken.
Er zijn meer dan duizend verschillende soorten projecten die u momenteel kunt uitlezen met behulp van de opdrachtregel, maar in deze zelfstudie doorlopen we er vier voor projecten op basis van:
Foundation heeft zijn eigen CLI (command line interface) die geweldig is voor het uitdragen van kaderprojecten van de Foundation. Laten we eens kijken hoe we de Foundation CLI gebruiken om een project te maken met behulp van Compass.
Het eerste deel van het steigerwerk van een nieuw Foundation-project is het installeren van de vereiste CLI. Voordat u dit doet, moet u ervoor zorgen dat er vijf vereisten op uw systeem zijn geïnstalleerd:
We hadden betrekking op de installatie van NodeJS, Git en Bower bij het temmen van pakketten van derden, de installatie van Ruby werd behandeld in de frontend-code voor inschakelen en de installatie van grunt-cli werd behandeld in automatisering met taakrunners.
Nadat je ervoor hebt gezorgd dat Ruby is geïnstalleerd, moet je de edelstenen van Compass en Bundler installeren met deze opdrachten:
gem installeer kompas
gem installeer bundel
Nu kunt u doorgaan en de Foundation CLI met deze opdracht installeren:
gem install foundation
Als u nu een nieuw Foundation-project wilt starten, opent u een terminal waar u het wilt maken en voert u de opdracht uit
stichting nieuwe projectnaam
U ziet dan uw nieuw gecreëerde projectmapstructuur gegenereerd, zoals:
Vanaf hier moet u een terminal in uw werkelijke projectmap wijzen, bijvoorbeeld binnen "projectnaam".
De "bundler" -steen die u eerder hebt geïnstalleerd, wordt hier gebruikt om te zorgen dat alle vereiste bibliotheken zijn geïnstalleerd. Krijg alles in het kwadraat door het commando uit te voeren:
bundel
U hoeft dit slechts één keer te doen wanneer u voor het eerst uw Foundation Compass-projecten maakt.
In de browser ziet uw nieuwe project er als volgt uit:
U bent nu klaar om de ontwikkeling van uw project te starten. Er is een ingebouwde Sass-compiler die de ".scss" -bestanden in de bibliotheek zal bekijken om ze te wijzigen en ze vervolgens opnieuw naar css voor u te compileren. Activeer het met de opdracht:
bundel exec kompas kijken
Yeoman is een hulpmiddel dat uitdrukkelijk is ontworpen om nieuwe projecten te ondersteunen. Het werkt bovenop NodeJS, integreert Bower voor pakketbeheer en gebruikt Grunt of Gulp voor taakuitvoering.
Na installatie van Yeoman wordt het basisproces voor steigers van elk nieuw project:
Accentsconagua
yo om een nieuw project te genereren, bijv. yo h5bp Lees meer over Yeoman op: http://yeoman.io/
Om Yeoman te gebruiken, moet je bower, grunt-cli en gulp wereldwijd geïnstalleerd hebben, wat je op dit moment zou moeten hebben zolang je alle tutorials in de serie tot nu toe hebt gevolgd.
Installeer Yeoman wereldwijd met de opdracht:
npm install -g yo
Nu ben je klaar om generatoren te zoeken en nieuwe projecten te steigereren.
Om een Bootstrap-project te scaffold gebruiken we de generator-gulp-bootstrap. Deze generator maakt onder andere het Bootstrap-framework, jQuery & Modernizr, BrowserSync, automatische Sass-compilatie via LibSass, automatische JS-linting en beeldoptimalisatie mogelijk.
Installeer de generator wereldwijd met:
[sudo] npm install -g generator-gulp-bootstrap
Richt uw terminal op elke plek waar u uw nieuwe project wilt scaffolden:
yo gulp-bootstrap
Je krijgt een klein display zoals dit in je terminal en je zult kunnen verifiëren dat je Bootstrap en Modernizr wilt gebruiken:
Nadat de generator is voltooid, hebt u een mapstructuur zoals deze:
Gebruik de opdracht om uw project te bouwen:
slok
Om een lokale preview te draaien met automatische compilatie en herladen run:
kloof kijken
In een browser ziet uw nieuwe Bootstrap-project er als volgt uit:
Om een nieuw HTML5 Boilerplate-project te scaffold gebruiken we generator-h5bp.
Installeer de generator wereldwijd met:
[sudo] npm install generator-h5bp -g
Steek uw nieuwe project uit met dit commando:
yo h5bp
U krijgt de optie om te kiezen of u wilt dat documenten in uw project worden opgenomen, waarna de generator wordt uitgevoerd.
Je hebt dan een nieuw HTML5 Boilerplate-project gestructureerd zoals dat:
In een browser is alles wat je ziet een eenvoudig "Hallo wereld!" Bericht, maar als je de code bekijkt, zul je zien dat je alles hebt wat je nodig hebt om je HTML5-site aan de gang te krijgen:
Web Starter Kit is een project van Google, ontworpen als "boilerplate & tooling voor ontwikkeling van meerdere apparaten". U kunt alles over de functies lezen op: https://developers.google.com/web/starter-kit/
Om dit te verhelpen, gebruiken we generator-mobiel.
Installeer de generator wereldwijd met:
[sudo] npm yeoman / generator-mobiel -g installeren
Steek uw GWSK-project uit met het commando:
jij mobiel
In uw terminal beantwoordt u een reeks vragen op basis waarvan uw project zal worden gegenereerd:
Wanneer de generator is voltooid, heeft uw nieuwe project de volgende structuur:
Als u een door BrowserSync aangedreven localhost-voorbeeld wilt openen, voert u deze opdracht uit:
slok serveren
De preview van uw site ziet er als volgt uit:
Notitie: Na het uitvoeren van het slurven dienen commando kan een foutmelding verschijnen dat browsersynchronisatie niet gevonden kan worden. Als dit het geval is, installeert u het met deze opdracht handmatig in uw map:
[sudo] npm browsersynchronisatie installeren
Om het hele project te bouwen voer je dit commando uit:
slok
Om feedback te krijgen over de snelheid van uw projectrun:
gulp paginasnelheid
Met deze opdracht kunt u de gegevens van "paginasnelheid" in uw terminal bekijken zoals:
En als u een van de hostingopties kiest terwijl u uw project steekt, publiceert u uw site met:
gulp inzetten
Dat is het ongeveer voor deze zelfstudie - u hebt nu een aantal gereedschappen voor uw vingertoppen om aan de slag te gaan met een paar veelgebruikte front-end frameworks, allemaal via de opdrachtregel!
