Share
Web Starter Kit is een nieuw Google-initiatief; een deel van hun missie om de webontwikkelingsworkflow te stroomlijnen en tegelijkertijd te pleiten voor de beste werkwijzen die ze voorstellen in de Web Fundamentals van Google.
Op het moment van schrijven bestaat Web Starter Kit nog maar een paar dagen en is het gelanceerd als een openbare repo op Github. Het heeft onmiddellijk zijn sporen verdiend binnen de gemeenschap voor webontwikkeling, waardoor het snel de toppositie in de trending-repositories van Github heeft bereikt.
Er zijn tegenwoordig tal van bibliotheken en frameworks, maar Web Starter Kit is behoorlijk spannend en het ontdekken waard. In dit bericht laat ik je een aantal van de belangrijkste functies zien en laat je zien hoe je deze kunt gebruiken voor je volgende nieuwe project. Zonder verder oponthoud gaan we aan de slag!
Zoals de naam al aangeeft, is Web Starter Kit een ontwikkeltoolkit die is ontworpen als een startpunt voor nieuwe projecten. Google beschrijft het in zijn Github-repository als:
Een startpunt voor webontwikkeling van meerdere apparaten
Bij inspectie zul je merken dat Web Starter Kit geïnspireerd is door bijvoorbeeld HTML5 Boilerplate en Yeoman (het combineert het beste van beide populaire tools). Web Starter Kit wordt geleverd met startsjablonen die zijn geoptimaliseerd voor zowel snelheid als meerdere apparaten.
We werken actief aan het leveren van de beste PageSpeed Insights-score en framesnelheid.
Daarbovenop omvat het ook een aantal hulpmiddelen om de ontwikkeling te vergemakkelijken, waaronder een gesynchroniseerde testtool, live browser-reloader, JavaScript-linter, Sass-compiler, CSS-minifier en een beeldoptimalisatie. Net als in Yeoman zijn deze hulpprogramma's vooraf geconfigureerd, zodat we de ontwikkeling kunnen starten zonder tijd te verspillen aan configuratie.
U kunt de bestanden ophalen uit de repo van Google en deze eenvoudig downloaden, maar om Web Starter Kit volledig te kunnen gebruiken voor uw nieuwe project, heeft u het advies om de volgende hulpprogramma's op uw systeem te installeren:
Git: Zoals hierboven vermeld, wordt het Web Starter Kit-project gehost op Github. Je zult het leaner vinden om de repository te pakken via de git clone commando in plaats van het Zip-pakket te downloaden. Als u de Github-app gebruikt, drukt u op Kloon op het bureaublad knop van de repopagina:
Weet je niet zeker waar het om gaat? bekijk Git voor ontwerpers op Tuts + Code.
Node.js: veel van de tools die u tegenkomt in de Web Starter Kit, zoals JSLinter, zijn gebouwd bovenop Node.js. En ze zullen worden geïnstalleerd via Node Package Manager (NPM). U kunt verwijzen naar Node installeren en NPM voor verdere hulp.
Ruby en Sass: Web Starter Kit maakt gebruik van gulp-robijn-sass om Sass in CSS te compileren, wat zowel Ruby als Sass vereist om te werken. Voor OS X- en Linux-gebruikers heb je Ruby al geïnstalleerd. Windows-gebruikers; gebruik RubyInstaller om Ruby te installeren. Nadat Ruby is geïnstalleerd, uitvoeren gem installeer sass vanaf de opdrachtprompt om Sass te installeren.
Voor meer informatie over het installeren van Ruby en Sass, bekijk Mastering Sass: les 1.
Slok: het gebruik van Gulp om veel van de taken die nodig zijn tijdens de ontwikkeling te verwerken, zal echt helpen. Installeer met Node.js al op uw systeem Gulp met de volgende opdracht:
npm install -g gulp
Zorg ten slotte voor de git en NPM commando's zijn toegankelijk. Typ de onderstaande opdracht om te testen of git en NPM functioneren.
git --version && npm -v
Deze opdrachten moeten reageren met de git en NPM versies, als volgt.
Ok, om aan de slag te gaan, navigeer naar de map waar je je project wilt hebben (navigeer met behulp van commando's of typ "cd" en sleep vervolgens je gekozen map naar het terminalvenster voordat je op "enter" tikt) en voer dan het volgende commando uit om te klonen het Web Starter Kit-project:
git clone https://github.com/google/web-starter-kit.git
Verander nadien de huidige map in de map "web-starter-kit" waar de bestanden van de Web Starter Kit zich bevinden.
cd web-starter-kit
In deze map, Web-starter-kit /, je zal vinden:
Accentsconagua
app /; dit is de map waar alle niet-geautoriseerde broncode zich bevindt.package.json; schakel de afhankelijkheden in.gulpfile.js; met de configuratie om de Gulp-taak uit te voeren.
Zoals gezegd, Web Starter Kit vertrouwt op een aantal knooppuntpakketten, inclusief Gulp-plug-ins, om verschillende build-processen uit te voeren. Dus het volgende dat je moet doen is de Node-pakketten installeren die zijn opgegeven in het bestand "package.json". Doe dit eenvoudig door het volgende commando in te voeren:
npm installeren
Een hele stapel knooppuntpakketten wordt dan geïnstalleerd in een map met de naam node_modules.
In een notendop, Gulp is vergelijkbaar met Grunt. Beide zijn "taaklopers" die bepaalde taken tijdens de ontwikkeling automatiseren, gericht op het harde werk voor u. Normaal gesproken zouden we Gulp-taken binnen een a moeten specificeren en configureren gulpfile.js, maar omdat Web Starter Kit dit voor ons heeft gedaan, kunnen we onmiddellijk de Gulp-taken uitvoeren zonder iets aan te raken.
Typ tijdens de ontwikkelprocedure dit commando hieronder.
slok serveren
Met deze opdracht wordt BrowserSync ingeschakeld die is opgenomen en geconfigureerd ingulpfile.js. BrowserSync is een handige tool waarmee we de website synchroon in meerdere browsers kunnen testen. Met BrowserSync wordt gebruikersinteractie zoals scrollen, klikken en invoegen van ingangen in realtime weergegeven op alle aangesloten apparaten. Dit stelt ons in staat om discrepanties op te vangen die kunnen optreden in elk verbonden apparaat terwijl de interactie plaatsvindt. BrowseSync is ook bewapend met een HTTP-server. Bij het uitvoeren van dit commando krijgt u de localhost adres waar u toegang heeft tot de website.
Verder zal BrowserSync wijzigingen bewaken die zijn gemaakt binnen de opgegeven bestanden, inclusief de HTML, de stylesheets en de afbeeldingen. Wanneer we deze bestanden wijzigen, voert BrowserSync onmiddellijk de taak uit die is opgegeven gulpfile.js
Elke keer dat u klaar bent om uw website te publiceren, kunt u gewoon rennen slok. Met deze opdracht worden alle Gulp-taken uitgevoerd en wordt het project gecomplementeerd in een distribueerbaar pakket in een nieuwe map met de naam dist / welke klaar is om aan je klant te worden overgedragen.
Een detaillijst met Gulp-taken is te vinden in de hulpmiddelen Overzicht van de Web Starter Kit.
Web Starter Kit biedt een stijlgids die de basisstyling start van gemeenschappelijke elementen en componenten, zoals typografie, knoppen, koppelingen, broodkruimels, tabellen, pictogrammen en rasters. Als u door de bron kijkt, vindt u ook de selectors die worden gebruikt om de stijlen te produceren.
De stijlgids is te vinden in de app / stijlgids map en deze is verbonden met de stylesheets, zodat we de Stijlgids kunnen zien evolueren terwijl de stylesheet wordt bijgewerkt. Briljant!
Basisstijl van Uitgelichte pictogrammen in Web Starter Kit StijlgidsNotitie: Bekijk onze serie All About Style Guides.
Goed gedaan! We hebben de Web Starter Kit samen met de afhankelijkheden gedownload en ingesteld, zodat u nu aan uw project kunt werken.
Globaal genomen, Web Starter Kit is behoorlijk solide - zelfs in de huidige beta-release. De sjabloon en hulpmiddelen zijn goed geconfigureerd; ze werken uit de doos. En aangezien dit project wordt ondersteund door Google met briljante ontwikkelaars erachter, kan Web Starter Kit snel zo populair worden als Bootstrap of Foundation. Ik kijk er echt naar uit om te zien hoe dit project in de toekomst evolueert.
