Share
Im ersten Beitrag dieser Serie habe ich einen kurzen Überblick über Grunt gegeben und im nächsten Post werde ich Sie durch die notwendigen Schritte führen, wie Grunt Ihre WordPress-Entwicklungsfähigkeiten verbessern kann.
Insbesondere werden wir ausführlich über die erforderlichen Dateien wie sprechen package.json und Gruntfile.js, Im Moment erstellen wir jedoch ein paar Beispieldateien, damit Sie Grunt mit Ihrem WordPress-Design- oder Plugin-Projekt ausführen können.
Bevor Sie beginnen, kann es hilfreich sein, den Inhalt des ersten Artikels dieser Serie zu überprüfen.
Wenn Sie sich alle eingeholt haben, gehen Sie zurück zu diesem Artikel und wir beginnen mit dem Erstellen unserer Projektdateien. Dies gibt uns letztendlich einen Überblick darüber, wie es aussieht, wenn Grunt für ein bestimmtes Projekt konfiguriert wird.
Im nächsten Artikel werden wir einen Blick darauf werfen, wie dies speziell für die WordPress-Arbeit getan wird, aber wir werden uns jetzt auf einen allgemeineren Ansatz konzentrieren.
Als Erstes erstellen wir eine package.json Datei im Stammverzeichnis des Projekts. Fügen Sie in dieser neuen Datei Folgendes hinzu:
"name": "projektname", "version": "1.0.0", "description": "Awesome project"
Es ist nicht nötig, das devDependencies object, da es automatisch hinzugefügt wird, wenn Grunt-Tasks über die Befehlszeile installiert werden.
Um Grunt-Tasks zu installieren, müssen Sie zu Ihrem Kommandozeilenwerkzeug Ihrer Wahl wechseln. Wenn Sie sich auf einem Mac befinden, wäre dies Terminal oder iTerm. Wenn Sie sich auf einem PC befinden, würde ich vorschlagen, PowerShell zu verwenden.
Navigieren Sie zuerst zu Ihrem Projekt root-Verzeichnis ('CD-Entwicklungsordner / Projektordner'). Als Nächstes installieren wir eine Task, um LESS-Dateien zu kompilieren. Wir installieren die Aufgabe ohne Grunt-Contrib-lose. Geben Sie also Folgendes in Ihre Befehlszeile ein und drücken Sie Eingeben:
npm install grunt-contrib-less --save-dev
Sie sehen eine Reihe von Zeilen, die als Aufgabe ausgedruckt werden, und alle ihre Abhängigkeiten werden von npm heruntergeladen. Sobald es fertig ist, sollten Sie so etwas sehen:
Jetzt sollten Sie in der Lage sein zu gehen package.json Datei und sehen Grunt-Contrib-less hinzugefügt zu Ihrem 'devDependencies' Objekt auch. Sie werden auch die Versionsnummer neben dem Namen hinzufügen. Ich könnte in einem ganzen anderen Post über Versionsnotation sprechen, aber für den Moment weiß ich, dass die Tilde bezieht sich auf die Version, mit der wir gerade arbeiten.
An diesem Punkt sollten Sie Folgendes sehen:
"name": "projektname", "version": "1.0.0", "description": "Awesome project", "devDependencies": "grunt-contrib-less": "~ 0.9.0"
Als nächstes fügen wir eine Aufgabe hinzu, um auf Änderungen in unserem System zu achten '.Weniger' Dateien. Wir werden die Grunt-Contrib-Watch-Aufgabe verwenden. Springe zurück zur Kommandozeile und drücke Eingeben:
npm install grunt-contrib-watch --save-dev
Wieder sollten Sie etwas Ausgabe auf dem Bildschirm sehen und sobald sie abgeschlossen ist, wird sie zu Ihrem hinzugefügt package.json Datei. Es sollte jetzt ungefähr so aussehen:
"name": "projektname", "version": "1.0.0", "description": "Awesome project", "devDependencies": "grunt-contrib-less": "~ 0.9.0", "grunt-contrib-watch": "~ 0.5.3"
Hoffentlich haben Sie jetzt den Dreh raus und können mit demselben Prozess andere Grunt-Aufgaben hinzufügen. Nur eine Erinnerung, um immer die '--save-dev'.
Nachdem nun einige Grunt-Aufgaben installiert sind, können wir sie jetzt verwenden. Das erste, was wir tun müssen, ist eine Gruntfile.js Datei im Stammordner unseres Projekts. Hier legen wir unsere Aufgaben fest und konfigurieren sie.
Fügen Sie dazu der Datei Folgendes hinzu:
module.exports = Funktion (Grunzen)
Das erste, was wir tun müssen, ist das Laden unserer Aufgaben, damit wir sie ausführen können. Sie tun dies, indem Sie mit der loadNpmTasks Funktion für jede Aufgabe. Bitte fügen Sie folgendes in die geschweiften Klammern ein:
grunt.loadNpmTasks ('grunt-contrib-less');grunt.loadNpmTasks ('grunt-contrib-watch');
Als nächstes müssen wir die Konfiguration für unsere installierten Grunt-Aufgaben einrichten. Wir müssen das verwenden initConfig Funktion wie folgt:
grunt.initConfig (pkg: grunt.file.readJSON ('package.json'),);
Nach dem Komma fügen wir unsere Konfiguration für jede installierte Aufgabe hinzu. In der Regel finden Sie Beispiele für die Konfiguration der einzelnen Aufgaben README.md Datei im Projekt auf GitHub. Für jede Aufgabe gibt es unterschiedliche Konfigurationsoptionen. Überprüfen Sie daher zuerst die Dokumentation.
Die erste Aufgabe, die wir konfigurieren werden, ist die Grunt-Contrib-less Aufgabe. Dieses wird unser kompilieren .Weniger Dateien in .css Dateien für uns. Sie möchten einen neuen Ordner für Ihre erstellen .Weniger Dateien und erstellen Sie eine neue. Normalerweise erstelle ich eine css / weniger Ordner und alle meine .Weniger Dateien dort.
Fügen Sie eine neue Datei mit dem Namen hinzu style.less und fügen Sie so etwas Code hinzu:
eine Farbe: blau; &: hover farbe: rot;
Kommen wir zu unserem zurück Gruntfile.js Datei und fügen Sie Folgendes hinzu:
Weniger:
Optionen:
Pfade: 'css / less',
yuicompress: wahr
,
Dateien:
'style.css': 'css / less / style.less'
Nachdem Sie die Datei gespeichert haben, sollten Sie in die Befehlszeile wechseln und dort eintippen können weniger grunzen und schlagen Eingeben. Dies wird die Grunzaufgabe anstoßen und unsere zusammenstellen .Weniger Datei und erstellen Sie eine neue style.css Datei in unserem Projekt root-Verzeichnis.
Nun, da wir eine Aufgabe haben, unsere zu kompilieren .Weniger Dateien, lassen Sie uns eine Überwachungsaufgabe hinzufügen. Wer will zur Kommandozeile gehen und laufen weniger grunzen jedes Mal, wenn wir Änderungen an einer Datei vornehmen, richtig?
Fügen Sie nach unserer vorherigen Konfiguration ein Komma und dann folgendes hinzu:
sehen:
Weniger:
Dateien: 'css / less / *. less',
Aufgaben: 'weniger'
Wenn Sie die Datei gespeichert haben, kehren Sie zur Befehlszeile zurück und geben Sie sie ein grunzen beobachten. Dies sollte Folgendes sehen:
Dies bedeutet, dass die Grunt-Überwachung auf Änderungen an einer der Dateien wartet, die Sie in Ihrer Konfiguration angegeben haben. Gehen Sie zu Ihrem style.less Datei und ändern Sie so:
eine Farbe: blau; &: hover farbe: grün;
Sobald Sie die Datei gespeichert haben, wird die Überwachungsaufgabe gestartet und Ihre kompiliert .Weniger Dateien in Ihre style.css Datei. Sobald der Vorgang abgeschlossen ist, wird er diese Dateien ständig ansehen und ist für eine weitere Änderung bereit.
Da es läuft, müssen Sie jetzt nur noch eine Änderung in einer Datei vornehmen, sie speichern und dann zu Ihrem Browser wechseln, um die Änderungen zu sehen.
Wir haben jetzt alles, um Grunt für Ihr nächstes Projekt einzusetzen. Dies war ein ziemlich einfaches Setup und ich bin mir sicher, dass Sie alle möglichen Aufgaben sehen können, die Sie in Ihrem Projekt haben können. Später in der Serie plane ich, erweiterte Funktionen mit Grunt wie benutzerdefinierte Aufgaben, verschachtelte Konfigurationen und andere Goodies zu behandeln.
Zuerst schauen wir uns jedoch an, wie wir dies in unsere WordPress-Projekte integrieren können.
Accentsconagua