Eine Einführung in Grunt

Die meisten Front-End-Webentwickler verbringen heute viel Zeit mit Technologien wie Sass, LESS, HTML und JavaScript. Die letzten Jahre waren eine aufregende Zeit in der Webentwicklung, und Technologien wie Grunt haben zu dieser Aufregung beigetragen.

In dieser Serie möchte ich Ihnen Grunt vorstellen und darüber sprechen, wie unsere Entwicklung von WordPress-Themes und Plugins verbessert werden kann. Wir werden auch daran arbeiten, Grunt so einzurichten, dass er für Ihr nächstes Projekt vorbereitet wird. Zum Schluss betrachten wir auch die Kommandozeilen-Tools.

Über Grunt

Grunt ist ein Automatisierungswerkzeug für Frontend-Entwickler. Es ist in JavaScript geschrieben, daher sollte es ziemlich verständlich sein, wenn Sie JavaScript kennen. Hier ist die Beschreibung von der Grunt-Website:

In einem Wort: Automatisierung. Je weniger Arbeit Sie für sich wiederholende Aufgaben wie Minifizieren, Kompilieren, Komponententests, Fusseln usw. ausführen müssen, desto einfacher wird Ihre Arbeit. Nachdem Sie ihn konfiguriert haben, kann ein Task-Runner die meiste Arbeit für Sie - und Ihr Team - mit praktisch keinem Aufwand erledigen.

Grunt ist ein agnostisches Betriebssystemtool. Wenn Sie also unter Mac, Windows oder Linux entwickeln, sollten Sie es verwenden können. Dies macht es wirklich gut für größere Teams, die über eine Mischung von Plattformen verfügen, mit denen sie sich entwickeln. Das Beste ist, wenn Sie Ihr Projekt mit Grunt einrichten, können Sie es auch für andere Personen freigeben. Wir werden dies in einem anderen Beitrag ausführlicher behandeln.

Node.js

Für diejenigen unter Ihnen, die noch nicht mit ihnen gearbeitet haben oder davon gehört haben, ist Node.js eine JavaScript-Laufzeitumgebung. Es hat sich in den letzten Jahren wirklich durchgesetzt und Technologien wie Grunt und Bower haben dazu beigetragen, dass die Akzeptanz beschleunigt wurde. Hier ist die Beschreibung von der Node-Website:

Node.js ist eine Plattform, die auf der JavaScript-Laufzeitumgebung von Chrome basiert und auf einfache Weise schnelle, skalierbare Netzwerkanwendungen erstellt. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E / A-Modell, das es kompakt und effizient macht. Es ist ideal für datenintensive Echtzeitanwendungen, die über verteilte Geräte laufen.

Der Knoten ist die einzige Voraussetzung für die Verwendung von Grunt und muss auf Ihrem Computer und möglicherweise auf Ihren Servern installiert sein. Grunt verwendet npm zur Installation und Verwaltung von Plugins. Weitere Informationen zu den Anforderungen finden Sie auf der Seite "Erste Schritte" auf der Grunt-Website.

Gruntfile

Sobald Sie die für Ihr Projekt benötigten Aufgaben installiert haben, benötigen Sie eine Möglichkeit, sie auszuführen. Hier kommt die Datei Gruntfile.js ins Bild. Die Gruntdatei gibt an, welche Aufgaben eingeschlossen werden sollen und welche Optionen Sie zur Ausführung angeben.

Hier werden Sie höchstwahrscheinlich Ihre Ziele und Quellen für jede Aufgabe angeben. Ein Beispiel wäre das Zeigen auf Ihre vorkompilierten .scss-Dateien und die Angabe des Speicherorts, an dem die kompilierten .css-Dateien gespeichert werden sollen. Sie werden auch andere Optionen angeben, die jedem Plugin zur Verfügung stehen. Diese werden normalerweise mit jedem Plugin dokumentiert.

Aufgaben

Aufgaben sind wirklich der Ort, an dem meiner Meinung nach die Macht liegt. Eine Aufgabe ist einfach eine Möglichkeit, eine Gruppe von Plugins auszuführen. Sie möchten eine Standardaufgabe angeben, die beim Ausführen ausgeführt wird 'grunzen'. Mit der Überwachungsaufgabe können Sie Aufgaben oder Plugins automatisch ausführen, wenn sich bestimmte Dateien in Ihrem Projekt ändern.

Ich habe vor, in einem späteren Beitrag mehr Aufgaben zu erledigen.

Fazit

Grunt ist definitiv ein Tool, das Sie kennen sollten, wenn Sie ein Front-End- oder WordPress-Entwickler sind. Dieses Zitat von der Grunt-Site fasst die Dinge zusammen,

Das Grunt-Ökosystem ist riesig und wächst täglich. Mit hunderten von Plug-ins können Sie mit Grunt nahezu alles automatisieren. Wenn jemand nicht bereits das gebaut hat, was Sie brauchen, ist das Erstellen und Veröffentlichen Ihres eigenen Grunt-Plugins für npm ein Kinderspiel.

Wenn Sie es noch nicht in Ihren Projekten eingesetzt haben, sollten Sie es unbedingt in Betracht ziehen.

Ressourcen

  • Grunzen
  • Node.js
  • Die JavaScript-Laufzeit von Chrome
  • Grunt Erste Schritte
  • Grunt Contrib Watch-Aufgabe