Share
Das Web Starter Kit ist eine neue Google-Initiative. Teil ihrer Mission ist es, den Web-Entwicklungsworkflow zu rationalisieren und gleichzeitig bewährte Vorgehensweisen zu befürworten, die in den Web-Grundlagen von Google vorgeschlagen werden.
Zum Zeitpunkt des Schreibens gab es das Web Starter Kit nur wenige Tage und wurde als öffentliches Repo bei Github eingeführt. Es hat sich sofort in der Web-Entwicklungsgemeinschaft etabliert und erreichte schnell den Spitzenplatz in Github's Trending Repositories.
Es gibt heutzutage viele Bibliotheken und Frameworks, aber das Web Starter Kit ist ziemlich aufregend und es lohnt sich, es zu erkunden. In diesem Beitrag gehe ich Ihnen durch einige der wichtigsten Funktionen und demonstriere, wie Sie es für Ihr nächstes neues Projekt verwenden können. Lass uns ohne weiteres anfangen!
Wie der Name schon sagt, ist das Web Starter Kit ein Entwicklungs-Toolkit, das als Ausgangspunkt für neue Projekte konzipiert wurde. Google beschreibt es in seinem Github-Repository als:
Ein Ausgangspunkt für die Entwicklung von Geräten für mehrere Geräte
Bei der Inspektion stellen Sie möglicherweise fest, dass das Web Starter Kit von HTML5 Boilerplate und Yeoman inspiriert wird (es kombiniert die besten dieser beiden populären Tools). Das Web Starter Kit wird mit Starter-Vorlagen geliefert, die sowohl für die Geschwindigkeit als auch für mehrere Geräte optimiert sind.
Wir arbeiten aktiv daran, den bestmöglichen PageSpeed Insights-Score und die beste Bildrate zu erzielen.
Darüber hinaus umfasst es eine Reihe von Tools zur Erleichterung der Entwicklung, einschließlich eines synchronisierten Test-Tools, eines Live-Browser-Neuladers, eines JavaScript-Browsers, eines Sass-Compilers, eines CSS-Minifiers und eines Bildoptimierers. Wie in Yeoman sind diese Tools bereits vorkonfiguriert, sodass wir mit der Entwicklung beginnen können, ohne Zeit für die Konfiguration zu verschwenden.
Sie können die Dateien aus dem Repo von Google herunterladen und einfach herunterladen. Um das Web Starter Kit vollständig für Ihr neues Projekt einsetzen zu können, sollten Sie die folgenden Tools auf Ihrem System installieren:
Git: Wie bereits erwähnt, wird das Web Starter Kit-Projekt auf Github gehostet. Sie werden feststellen, dass es schlanker ist, das Repository durch die Git Klon Befehl statt das Zip-Paket herunterzuladen. Wenn Sie die Github-App verwenden, drücken Sie die Klonen Sie in Desktop Button von der Repo-Seite:
Sie sind sich nicht sicher, worum es bei git geht? Besuche Git für Designers on Tuts + Code.
Node.js: Viele der in Web Starter Kit enthaltenen Tools, z. B. JSLinter, basieren auf Node.js. Sie werden über Node Package Manager (NPM) installiert. Weitere Informationen finden Sie unter Installieren von Knoten und NPM.
Ruby und Sass: Das Web Starter Kit verwendet gulp-ruby-sass, um Sass in CSS zu übersetzen, was sowohl Ruby als auch Sass erfordert. Für Benutzer von OS X und Linux ist Ruby bereits installiert. Windows-Benutzer; Verwenden Sie RubyInstaller, um Ruby zu installieren. Sobald Ruby installiert ist, führen Sie es aus gem install sass von der Eingabeaufforderung aus, um Sass zu installieren.
Weitere Informationen zum Installieren von Ruby und Sass finden Sie unter Mastering Sass: Lektion 1.
Schluck: Die Verwendung von Gulp für viele der während der Entwicklung erforderlichen Aufgaben wird wirklich hilfreich sein. Wenn Node.js bereits auf Ihrem System installiert ist, installieren Sie Gulp mit dem folgenden Befehl:
npm install -g gulp
Schließlich stellen Sie sicher, dass git und npm Befehle sind zugänglich. Geben Sie den folgenden Befehl ein, um zu testen, ob git und npm funktionieren.
git --version && npm -v
Diese Befehle sollten mit dem antworten git und npm Versionen wie folgt.
Um zu beginnen, navigieren Sie zu dem Verzeichnis, in dem Sie Ihr Projekt haben möchten (navigieren Sie entweder mit Befehlen oder geben Sie "cd" ein, ziehen Sie den ausgewählten Ordner in das Terminalfenster, bevor Sie auf "Eingabe" klicken). Führen Sie dann den folgenden Befehl zum Klonen aus das Web Starter Kit-Projekt:
Git-Klon https://github.com/google/web-starter-kit.git
Wechseln Sie anschließend das aktuelle Verzeichnis in den Ordner "Web-Starter-Kit", in dem sich die Web Starter Kit-Dateien befinden.
CD Web-Starter-Kit
In diesem Ordner, Web-Starter-Kit /, du wirst finden:
Accentsconagua
app /; Dies ist der Ordner, in dem sich der nicht minimierte Quellcode befindet.package.json; die Abhängigkeiten eintragen.gulpfile.js; enthält die Konfiguration zum Ausführen der Gulp-Task.
Wie bereits erwähnt, basiert das Web Starter Kit auf einer Reihe von Node-Paketen, einschließlich Gulp-Plugins, um mehrere Buildprozesse auszuführen. Als nächstes müssen Sie die Node-Pakete installieren, die in der Datei "package.json" angegeben sind. Dazu einfach den folgenden Befehl eingeben:
npm installieren
Ein ganzer Stapel von Knotenpaketen wird dann in einem Ordner namens installiert Knotenmodule.
Kurz gesagt, Gulp ähnelt Grunt. Beide sind "Task Runner", die bestimmte Aufgaben während der Entwicklung automatisieren und die harte Arbeit für Sie erledigen. Normalerweise müssten wir Gulp-Tasks in einem angeben und konfigurieren gulpfile.js, Aber da das Web Starter Kit diese Aufgabe für uns erledigt hat, können wir die Gulp-Aufgaben sofort ausführen, ohne etwas zu berühren.
Geben Sie im Verlauf Ihres Entwicklungsprozesses den folgenden Befehl ein.
Schluck servieren
Dieser Befehl aktiviert BrowserSync, das in integriert und konfiguriert wurdegulpfile.js. BrowserSync ist ein praktisches Tool, mit dem wir Websites synchron mit mehreren Browsern testen können. Mit BrowserSync wird die Benutzerinteraktion wie Scrollen, Klicken und Eingeben von Eingaben in Echtzeit auf allen angeschlossenen Geräten angezeigt. Dadurch können wir eventuelle Unstimmigkeiten feststellen, die bei jedem verbundenen Gerät während der Interaktion auftreten können. BrowseSync ist auch mit einem HTTP-Server ausgestattet. Wenn Sie diesen Befehl ausführen, erhalten Sie die localhost Adresse, unter der Sie auf die Website zugreifen können.
Darüber hinaus überwacht BrowserSync Änderungen, die in den angegebenen Dateien vorgenommen wurden, einschließlich HTML, Stylesheets und Bildern. Wenn wir diese Dateien ändern, führt BrowserSync sofort die Aufgabe aus, die in angegeben wurde gulpfile.js
Wenn Sie Ihre Website veröffentlichen möchten, können Sie sie einfach ausführen Schluck. Dieser Befehl führt alle Gulp-Tasks aus und kompiliert das Projekt in einem verteilbaren Paket in einem neuen Ordner mit dem Namen dist / die bereit ist, an Ihren Kunden übergeben zu werden.
Eine detaillierte Liste der Gulp-Aufgaben finden Sie unter Zusammenfassung der Web Starter Kit-Tools.
Das Web Starter Kit enthält einen Style Guide, der die grundlegende Gestaltung allgemeiner Elemente und Komponenten wie Typografie, Schaltflächen, Verknüpfungen, Breadcrumbs, Tabellen, Symbole und Raster anspricht. Durchsuchen der Quelle finden Sie auch die Selektoren, mit denen die Stile erzeugt werden.
Den Style Guide finden Sie im App / Styleguide Ordner und der Ordner ist mit den Stylesheets verbunden, sodass sich der Style Guide während der Aktualisierung des Stylesheets weiterentwickelt. Brillant!
Grundlegendes Styling von Featured Icons im Style Guide für Web Starter KitHinweis: Schauen Sie sich unsere Serie All About Style Guides an.
Gut gemacht! Wir haben das Web Starter Kit zusammen mit seinen Abhängigkeiten heruntergeladen und eingerichtet, sodass Sie jetzt in der Lage sein sollten, an Ihrem Projekt zu arbeiten.
Alles in allem, Web Starter Kit ist ziemlich solide - selbst in der aktuellen Beta-Version. Die Vorlage und die Werkzeuge sind gut konfiguriert. Sie arbeiten aus der Box. Und da dieses Projekt von Google mit brillanten Entwicklern unterstützt wird, könnte das Web Starter Kit schnell so beliebt sein wie Bootstrap oder Foundation. Ich freue mich sehr darauf zu sehen, wie sich dieses Projekt in der Zukunft entwickelt.
