Share
Im ersten Teil dieser Serie habe ich einen kurzen Überblick über Grunt gegeben. Ich sprach auch über die verschiedenen Technologien, die es braucht, um es einzusetzen. Danach habe ich mich ein wenig mit der Gruntfile und den darin enthaltenen Aufgaben beschäftigt.
Jetzt möchte ich darüber sprechen, wie Sie mit Grunt Ihre Entwicklung sowohl für WordPress-Themes als auch für Plugins verbessern können.
Mein Lieblingsteil bei der Verwendung von Grunt und npm ist, dass Sie bei der Einrichtung Ihres Projekts die Abhängigkeiten Ihres Projekts selbst dokumentieren. Dies ist ideal für Entwicklungsteams und Open-Source-Projekte. Wer sowieso eine Dokumentation zum Einrichten eines Arbeitsbereichs schreiben möchte, ist richtig?
Zunächst benötigen Sie eine package.json-Datei in Ihrem Projekt. Sie müssen den Namen, die Version und die Beschreibung des Projekts einrichten. Im nächsten Beitrag werden wir uns näher damit befassen, aber hier ein Beispiel:
"name": "Projektname",
"version": "1.0.0",
"description": "Tolles Projekt"
Wenn Sie dies eingerichtet haben und ein grunt-Plugin installieren, müssen Sie es nur anhängen --save-dev bis zum Ende und es wird das Plugin zu Ihrer package.json-Datei unter hinzufügen devDependencies. Zum Beispiel, wenn ich das hinzufügen wollte Grunt-Contrib-Watch Plugin zu meinem Projekt Ich würde den folgenden Befehl ausführen:
npm install grunt-contrib-watch --save-dev
Das Plugin wird zu Ihrem hinzugefügt Knotenmodule Ordner und es sollte auch dazu führen, dass Ihre package.json-Datei so aussieht:
"name": "Projektname",
"version": "1.0.0",
"description": "Tolles Projekt", "devDependencies":
"grunt-contrib-watch": "~ 0.5.x"
Da installierst du andere Grunt-Plugins und fügst hinzu --save-dev Am Ende sehen Sie sie unter der devDependencies Objekt.
Warum ist das vorteilhaft? Wie ich bereits erwähnt habe, dokumentiert dies Ihre Abhängigkeiten zu Ihrem Projekt. Nachdem Sie alle Plugins installiert und Ihrer package.json-Datei hinzugefügt haben, kann jetzt ein anderes Teammitglied oder ein anderer Mitarbeiter ausgeführt werden npm installieren und sie werden alles installieren, was für das Projekt benötigt wird.
Sie können dies ganz einfach testen, indem Sie Ihr gesamtes löschen Knotenmodule Ordner und läuft npm installieren dich selbst. Sie sehen alles, was Sie automatisch installiert haben.
[Anmerkung] Sie möchten das hinzufügen Knotenmodule Ordner zu Ihrem .Gitignore Datei, damit Sie Ihr Repository nicht aufblähen. [/ note]
Ich verwende viele ähnliche Grunt-Plugins für jedes Projekt, aber das, das ich immer installiere, ist das, auf das ich zuvor verwiesen habe, Grunt-Contrib-Watch. Wenn dieses Plugin ausgeführt wird, werden die Dateien des Projekts überwacht und alle für diese Datei oder diesen Dateityp festgelegten Aufgaben gestartet.
Ein Beispiel wäre für jede Ihrer JavaScript-Dateien. Wenn Sie Änderungen an einem von ihnen vornehmen und speichern, können Sie Grunt eine JSLint-, Concat- und Minify-Aufgabe ausführen lassen. Sie können auch eine Reihenfolge angeben. Wenn eine erfolgreich ist, wird die nächste abgesetzt. Wenn einer fehlschlägt, wird die gesamte Tasksequenz abgebrochen.
CodeKit hat eine ähnliche Funktion, führt jedoch alle Ihre Aufgaben aus. Wenn Sie beispielsweise eine SASS- oder LESS-Datei ändern, werden nicht nur diese Aufgaben ausgelöst, sondern auch Ihre JavaScript-Dateiaufgaben. Mit dem Grunt-Überwachungsauftrag haben Sie mehr Kontrolle darüber, welche Aufgaben ausgeführt werden, wenn bestimmte Dateien oder Dateitypen geändert werden.
Neben den Grunt-Tasks für die installierten Plugins können Sie auch eigene benutzerdefinierte Tasks erstellen. Wenn ich ein Projekt aufbaue, habe ich oft 3 Aufgaben, die ich eingerichtet habe, Standard, Konfiguration, und bauen.
Die Standardaufgabe ist die Aufgabe, die mit Ihrer Ausführung ausgeführt wird grunzen von der Kommandozeile aus. Oft werde ich meine Überwachungsaufgabe auf Standard setzen. Sie können auch hinzufügen, welche Aufgabe Sie ausführen möchten.
Die Setup-Aufgabe, die ich eingerichtet habe, erledigt normalerweise die Dinge, die nur beim ersten Einrichten des Projekt-Setups ausgeführt werden müssen. Oft benutze ich Bower, um Bibliotheken von Drittanbietern wie Bootstrap zu laden. Ich muss die herunterziehen, dann eine Kopieraufgabe ausführen, um einige Dateien in mein Projekt zu verschieben, und dann eine erste Kompilierung der LESS- und JavaScript-Dateien starten.
Die Erstellungsaufgabe wird für die Dinge verwendet, die vor dem Freigeben oder Verteilen Ihres Projekts ausgeführt werden müssen. Ich führe das immer aus, um sicherzustellen, dass alles verkettet, minimiert und komprimiert wird. Ein gutes Beispiel ist die Verwendung von grunt-contrib-imagemin, um alle Bilder in Ihrem Projekt zu optimieren. Ein anderes Beispiel ist die Verwendung der grunt-contrib-compress, um eine ZIP-Datei Ihres Designs zu erstellen, sodass die Installation über den WordPress-Administrator einfach ist.
Grunt ist definitiv ein großartiges Werkzeug für Entwicklerteams. Von der automatischen Dokumentation der Abhängigkeiten Ihres Projekts bis hin zum Erstellen von benutzerdefinierten Elementen macht Grunt Sie effizient. Verwenden Sie Grunt, um verschiedene Aufgaben in Ihrem Projekt zu automatisieren, sodass Sie sich auf das Erstellen Ihres WordPress-Designs oder -Plugins konzentrieren können.
Accentsconagua