Starter-Projekt – Eine Reihe aktueller Best Practices, verpackt in Gulp-Aufgaben

Dieser Artikel ist der allererste Artikel in einer Serie über Starter-Projekt, eine Reihe aktueller Best Practices, verpackt in Gulp-Aufgaben. In diesem Artikel werde ich die Idee hinter diesem Projekt erklären, wie es Ihnen bei Ihrem Projekt helfen könnte und wie Sie es verwenden.

Erstes Szenario

Jedes Projekt hat seine Umgebung. Zwischen Projekten zu wechseln bedeutet, Umgebungen zu wechseln. Das Wechseln der Umgebung bedeutet, sich Befehle zum Ausführen von Projektaufgaben wie Gulp oder Webpack zu merken. Aber zu oft werden Befehle vergessen. Dieses Szenario passiert mir täglich, auch wenn ich an ähnlichen Projekten arbeite.

Zweites Szenario

Betrachten Sie zwei verschiedene Projekte. Das erste ist die Entwicklung eines benutzerdefinierten WordPress-Themes, das zweite der Middleman-Blog. Beide Projekte verwenden Gulp Task Runner, um Assets zu kompilieren und zu optimieren. Das Einrichten von Gulp-Aufgaben für beide Projekte ist zeitaufwändig. Und jedes Projekt hat seine eigene Architektur, die einen Entwickler daran hindert, Gulp-Aufgaben von einem Projekt in ein anderes zu kopieren, ohne die Zeit aufzuwenden, jede Gulp-Aufgabe einzeln neu zu konfigurieren.

Drittes Szenario

An einem Projekt ohne Programmierkonvention zu arbeiten, könnte ein Alptraum sein. Git-Konflikte bei jedem Merge, endlose Diskussionen über Tabulatoren oder Leerzeichen, hässlicher und inkonsistenter Code sind nur einige der Probleme, die daraus entstehen können.

Die Idee

Ich bin sicher, diese Szenarien kommen Ihnen bekannt vor. Diese sind mir oft passiert. Ich kann mich nicht einmal erinnern, wie oft ich ein Sass-Mixin oder eine JavaScript-Funktion in einem Projekt erstellt habe, das ich in einem anderen Projekt verwenden wollte, aber ich war zu faul, um nach dem Code zu suchen, und schließlich habe ich von vorne angefangen.

Das Starter-Projekt ist ein Versuch von mir, diese Probleme zu beheben. Es ist eine Sammlung von Gulp-Aufgaben mit den neuesten Best Practices in der Front-End-Entwicklung. Aber nicht nur Aufgaben schlucken. Es enthält alle Ressourcen für den Aufbau eines erfolgreichen Projekts, von HTML und CSS bis hin zu JavaScript und Bildern.

Das Paket

Das Paket ist verfügbar unter npm. Eine Anleitung zur Installation finden Sie in amtliche Dokumentation. Nach der Installation haben Sie die Kopie der Website des Pakets für das Starter-Projekt. Es könnte ein guter Ausgangspunkt für Ihr neues Projekt sein.

Starter Package ist auch ein statischer Seitengenerator, ein sehr rudimentärer. Die ursprüngliche Website wird mit Starter Project erstellt und auf Netlify gehostet. Es ist sehr schnell, siehe die PageSpeed-Einblicke und WebseitenTest Partituren.

Das Paket sollte als Entwicklungsabhängigkeit verwendet werden. Dadurch können Sie das Paket aktualisieren und Ihr Projekt effizienter verwalten.

package.json-Datei

Die Verwendung

Das Starter-Projekt hat drei verschiedene Gulp-Befehle für verschiedene Umgebungen:

  • gulp dev und gulp dist für einen Entwicklungsbau,
  • gulp docs für Dokumentationserstellung und
  • gulp für einen Produktionsaufbau.

Weitere Informationen zu Befehlen finden Sie unter amtliche Dokumentation.

Mit Starter Project erhalten Sie die Architektur für:

  • HTML,
  • CSS,
  • Javascript,
  • Bilder (.png, .jpg, .svg),
  • Favoriten,
  • Schriftarten,
  • und mehr.

Sie finden alle Assets in new_src Mappe. Sobald Sie einen der Build-Befehle ausführen, new_dist Ordner wird mit kompilierten statischen Inhalten erstellt. Erfahren Sie mehr über Struktur hier.

Die Config-Datei

Das Starter-Projekt ist konfigurierbar und sollte in jedem Projekt unabhängig von der Architektur ausgeführt werden können. Die Hauptkonfigurationsdatei befindet sich im Stammverzeichnis des Projekts. config.json. Für jede Aufgabe gibt es eine Option run. Wenn der Wert auf „true“ gesetzt ist, wird die Aufgabe ausgeführt. Sie könnten zum Beispiel abschalten penthouseeine Bibliothek zum Generieren von Critical CSS.

Penthouse-Konfiguration

Lesen Sie mehr über die Konfiguration hier.

Merkmale

Ich habe Critical CSS im vorherigen Abschnitt erwähnt. Starter Project hat andere großartige Funktionen.

Pug ist die Standard-Template-Engine. Markdown wird auch über den Pug-Filter unterstützt jstransformer-markdown-it. Ich sollte erwägen, Unterstützung für weitere Template-Engines hinzuzufügen, wenn Interesse gezeigt wird.

Sass kommt mit normalisieren.css, modularscale-sass und sass-mq Bibliotheken standardmäßig. Es hilft Ihnen, konsistentere Seiten mit streng definierten Typografie- und Medienabfragen zu erstellen.

Starter Project unterstützt ES6 über das Babel-Plugin. Sie finden Skripte zum verzögerten Laden von CSS-Dateien (verwenden Sie es in Kombination mit Critical CSS) und zum Laden von Schriftarten mit Kritische FOFT-Methode.

Wenn Sie keinen Drittanbieterdienst zum Hosten von Bildern verwenden, kann Starter Project Ihre Bilder optimieren. Starter-Projekt unterstützt
.gif, .png, .jpgund .svg Dateien.

Die Dokumentation ist ein wesentlicher Bestandteil jedes Projekts. Mit Starter Project können Sie eine hervorragende Dokumentation erstellen. SassDoc analysiert Sass-Kommentare und erstellt eine Sass-Dokumentation. JSDoc analysiert JavaScript-Kommentare und erstellt eine JavaScript-Dokumentation. Sie könnten sogar einen Living Styleguide erstellen. Starter-Projekt verwendet KSS Sass-Kommentar zu diesem Zweck zu analysieren.

Es gibt andere Extras wie Browser-Sync, Favicons, Sourcemaps, Gzip, Linters, Standards, Editorconfig und mehr. Ich werde versuchen, alles zu dokumentieren und auch neue Artikel darüber zu schreiben. Bleib dran!

Webseiten

Ich habe Starter Project bisher für mehrere verschiedene Projekte verwendet.

  • Han Han Xue-Website – eine Website mit einem Blog für Han Han Xue, einen Designer und FX Technical Director aus Montreal, Kanada. Die Seite läuft auf Middleman.
  • Irina & Matej-Website – eine Website für Irina und Matej, Hochzeits- und Porträtfotografen aus Kroatien. Die Seite läuft auf WordPress.
  • Silvestar Bistrović-Website – eine persönliche Website mit einem Blog. Die Seite läuft auf Hexo.
  • Starter-Projekt-Website – eine Website für das Starter-Projekt. Die Website läuft nur auf Starter Project.

Fazit

Starter Project ist nicht als strenges Regelwerk konzipiert. Dieses Paket sollte so konfiguriert werden, dass es jede Projektspezifikation erfüllt; Sie könnten neue Funktionen vorschlagen, das Repository verzweigen oder einige der Aufgaben in der Konfigurationsdatei deaktivieren.

Zeigen Sie Ihre Unterstützung: Geben Sie Feedback, öffnen Sie sich ein neues Themaschaffen ein neuer Pull-Requestoder hinterlassen Sie einen Kommentar.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *