Zeit, Grunting zu starten.
In dieser und der nächsten Übung wiederholen wir
die gleiche Art von Setup wie bei den NPM-Skripten.
Im ersten Teil werden wir die Konvertierung von SCSS in CSS einrichten.
Dann richten wir eine Watch-Aufgabe ein und dienen auch den Code mit Browser-Synchronisierung.
Im zweiten Teil der Übung
werden wir Usman und die verschiedenen Aufgaben nutzen, um die Verteilungsfalte vorzubereiten.
Diese Übungen sind keineswegs die einzige Möglichkeit,
Grunt-Konfigurationen oder Aufrufdateien zu implementieren.
Dies ist nur ein Beispiel dafür, wie wir diese Werkzeuge nutzen können.
Vielleicht möchten Sie Ihre eigene Art und Weise finden, Ihre
Grunt-Datei und Ihre Anrufdatei für Ihre Projekte einzurichten.
Unser erster Schritt bei der Nutzung von Grunt besteht darin, die Grunt CLI als globales NPM-Modul einzurichten.
Fügen Sie dazu den Eingabeaufforderungstyp hinzu: NPM -g install Grunt CLI.
Dies ist die Befehlszeilenschnittstelle für Grunt.
Sobald dies eingerichtet ist,
werden wir ein lokales Grunt NPM-Modul für die Verwendung in unseren Projekten einrichten.
Die Grunt CLI ermöglicht es uns, Grunt zu nutzen.
Wir haben die Grunt CLI eingerichtet.
Dann ist der nächste Schritt einzurichten- Grunt lokal,
also; NPM installieren Grunt minus minus Dev speichern.
Installieren Sie dann das Grunt lokal.
Sobald Sie diese beiden Schritte abgeschlossen haben,
gehen Sie im nächsten Schritt zu unserem Projekt und erstellen Sie dann eine neue Datei,
und wir werden es als Gruntfile.js nennen.
In dieser Gruntfile.js richten wir den Code für die Konfiguration unserer Grunt-Aufgaben ein.
In dieser Datei besteht der erste Schritt darin, „use strict“ Bedeutung,
„use strict“ JavaScript-Code hinzuzufügen.
Dann sagen Sie module.exports
= Funktion (grunt).
Dann werden wir hier drinnen die Grunt-Konfiguration für alle Aufgaben einrichten.
Wie ich bereits erwähnt habe, ist Grunt ein konfigurationsbasierter Task Runner.
So installieren wir die verschiedenen Grunt-Plug-Ins für
die verschiedenen Aufgaben und konfigurieren sie dann in unserer Grunt-Datei.
Um die Konfiguration zu tun,
werden wir in den Code hier hinzufügen,
sagen: Grunt.initConfig
und in diesem InitConfig,
werden wir in der Konfiguration für die Grunt-Aufgaben des Rades hinzufügen.
Sobald Sie dies abgeschlossen haben,
speichern wir die Änderungen.
In unserem nächsten Schritt
werden wir einige Grunt-Plug-Ins einrichten, damit wir SCSS-Code in CSS-Code umwandeln können.
Um dies zu tun, installiere ich ein NPM-Modul namens
Grunt SASS — Grunt SASS, spare def.
Darüber hinaus
werde ich zwei weitere Grunt-Module einrichten, die
NPM Install Time Grunt und Jit Grunt genannt werden.
Diese beiden Module — Time Grunt und Jit grunt.
Das Modul Time Grunt gibt die Zeitstatistiken für die Ausführung der verschiedenen Grunt-Aufgaben aus.
Das Jit Grunt-Modul wird zum Laden
dieser Grunt-Plug-Ins verwendet, wenn sie innerhalb einer Anwendung benötigt werden.
Die andere Alternative besteht darin,
die verschiedenen Grunt-Module explizit in Ihre Grunt-Konfigurationsdatei zu laden.
Ich bevorzuge es, den Jit Grunt zu verwenden, damit er sich darum kümmert,
welche Grunt-Plug-Ins ich brauche, wie es erforderlich ist,
wie in, wenn ich sie im Code verwende.
Installieren Sie diese beiden Time Grunt und Jit Grunt und sobald sie installiert sind,
dann ist es Zeit, unsere SASS Konvertierungsaufgabe zu konfigurieren.
Jetzt müssen Sie sich offensichtlich fragen, warum wir dieses
module.exports eingeben und dann funktionieren und so weiter.
So definieren wir Knotenmodule.
Wir beschäftigen uns mit der Struktur von Knotenmodulen und warum wir diesen Ansatz
im serverseitigen Knotenmodulen Kurs später in der Spezialisierung verwenden.
Akzeptieren Sie im Moment einfach, dass so der Code für Grunt geschrieben wird,
weil die Grunt-Datei selbst
ein Knotenmodul ist, das in verschiedenen Grunt-Plug-Ins geladen wird.
Nachdem wir das getan haben, werden wir hier ein paar Grunt Plugins benötigen.
Um dies zu tun, werden wir sagen, require ('time- grunt'),
und wir sagen grunt gegen die Konfiguration, die wir zum Laden in der Time Grunt verwenden.
Zu erfordern, wie Sie später erfahren werden, wenn Sie über Knotenmodule lernen,
ist eine Möglichkeit, zu sagen, dass die Last im Time Grunt Knotenmodul
innerhalb dieses speziellen Knotenmoduls verwendet werden soll.
In ähnlicher Weise werde ich Jit Grunt Knotenmodul benötigen.
Dieses Jit Grunt Knotenmodul stellt sicher, dass es in
allen anderen Knotenmodulen oder anderen Grunt Plug-Ins geladen wird - die Knotenmodule sind,
im Grunde, wie in, wenn sie tatsächlich in meinem Grunt für verschiedene Aufgaben impliziert werden.
Die Alternative wäre, jedes einzelne
dieser Grunt-Plug-Ins explizit manuell zu laden, indem die erforderliche Anweisung verwendet wird.
Ich erspare mir ein wenig Ärger, indem ich nur Jit Grunt verwende,
der sich darum kümmert, diese Knotenmodule bei Bedarf zu laden.
Jetzt in die Konfiguration,
wie wir verstanden haben, arbeitet Grunt an der Konfiguration,
so dass jedes Grunt Plug-in, das wir für die Durchführung einer Aufgabe verwenden möchten,
es innerhalb dieser Grunt InitConfig-Datei konfiguriert werden muss.
Diese Konfiguration ist im Grunde ein JavaScript-Objekt.
Wenn Sie mit JavaScript-Objekten vertraut sind,
beginnen Sie, die Syntax sehr, sehr schnell zu verstehen.
Die erste Aufgabe, die ich konfigurieren werde, ist SASS.
Also, ich tippe hier SASS ein,
und dann in SASS, sage ich dist.
Jetzt müssen Sie glauben, dass auf diese Weise die Konfiguration durchgeführt wird.
Also, ich sage dist,
und dann drinnen
sage ich Dateien, und dann
gebe ich die Dateien an, die konvertiert werden müssen.
Ich sage, CSS/styles.CSS, die
von CSS/Styles.scss abhängig ist.
Damit schließen wir hier die Konfiguration der SASS-Aufgabe ab.
Sobald wir die Konfiguration der SASS-Aufgabe abgeschlossen haben,
wenn Sie die SASS-Aufgabe wirklich ausführen möchten,
dann unten würden Sie die SASS-Aufgabe konfigurieren, indem Sie „Grunt.RegisterTask“ sagen,
und dann werde ich diese Aufgabe CSS aufrufen
, und dann werde ich
in Schreiberklammern sagen „SASS“.
Nun, um die Syntax hier zu verstehen, lautet
dies, wie Sie sehen können, „Grunt.RegisterTask“ und der Name dieser Aufgabe ist CSS.
Und was beinhaltet diese Aufgabe?
Diese Aufgabe beinhaltet die Ausführung der SASS-Aufgabe, die hier bereits konfiguriert wurde.
So lesen wir diese Syntax hier.
Wenn Sie dies nicht wünschen, müssen Sie dies nicht konfigurieren,
da wir SASS zusammen mit der Watch-Aufgabe verwenden, um die
SASS automatisch auszuführen, wenn unsere SCSS-Datei geändert wird.
Lassen Sie uns damit die Änderungen speichern.
Lassen Sie mich Ihnen diese besondere Aufgabe in Aktion zeigen.
Wenn Sie die Aufgabe mit dem Namen CSS dort konfigurieren,
fügen Sie die Eingabeaufforderung hinzu,
Sie können „grunt.CSS“ eingeben und dann wird
die Aufgabe ausgeführt, den sass-Code in CSS-Code zu konvertieren.
Gehen Sie zur Eingabeaufforderung,
geben Sie an der Eingabeaufforderung „grunt.CSS“ ein, und Sie sehen, wie
die SASS-Task ausgeführt wird und dann style.sess Datei in styles.CSS konvertiert.
Wie Sie sehen können,
druckt der Time Grunt Statistiken wie diese aus,
um anzugeben, wie viel Zeit jede dieser Aufgaben benötigt.
Wenn das für Sie von Interesse ist,
dann können Sie sich diese Details hier ansehen.
In unserem nächsten Schritt werden wir die Uhr und den Server konfigurieren,
um eine Uhr auf
die SASS-Dateien zu halten und sie automatisch zu konvertieren, wenn sie geändert werden,
und dann richten wir den Server ein,
mit BrowserSync für die Bereitstellung unserer Website.
Um die Watch and Serve Tasks einzurichten,
werde ich ein paar weitere Grunt-Plug-Ins installieren,
also werde ich sagen, npm install,
grunt-contrib-watch minus save-dev.
Das ist also die Grunt-contrib-Uhr.
Grunt Plug-in, das ein Knotenmodul ist, also installieren Sie das. Mit
dem Watch-Plugin-In können Sie Ihre verschiedenen Dateien überwachen.
Das nächste Plug-in, das ich
installieren werde, ist grunt-browser-Sync.
Das BrowserSync-Modul ist das, das ich verwenden werde, um
die Dateien aus meinem Projektordner zu speichern,
so dass ich die Website in einem Browser sehen kann.
Sobald ich diese beiden Module installiert habe,
ist es Zeit, in meine grunt.initconfig zu gehen
und dann die beiden Aufgaben zu konfigurieren.
Eine zum Halten einer Uhr,
die zweite zum Bereitstellen der Dateien mit BrowserSync.
Gehen Sie also zurück zu meiner initconfig,
setzen Sie nach dem SASS ein Komma
und gehen Sie dann in die nächste Zeile.
Denken Sie immer daran, dieses Komma dort zu setzen.
Ein fehlendes Komma verursacht viele Kopfschmerzen, wenn Sie versuchen, Ihre Grunz-Aufgaben auszuführen.
Es ist sehr schwierig zu erkennen, dass Sie ein Komma verpasst haben.
Daher ist es wichtig, auf
die Syntax zu achten und sicherzustellen, dass Sie keines dieser Kommas verpassen.
Es wird zurückkommen, um dich zur falschen Zeit zu beißen.
Die nächste Aufgabe,
die ich konfigurieren werde, ist die WatchTask.
Also sage ich „Watch“ und was möchte ich sehen?
Ich möchte diese Dateien ansehen, die CSS/*.SCSS ist.
Das ist also die SCSS-Datei, die ich ansehen möchte.
Alle SCSS-Dateien in meinem CSS-Ordner.
Wenn einer von ihnen modifiziert
wird, dann ist die entsprechende Aufgabe, die ich ausführen werde, SASS.
Die SASS-Aufgabe, die ich bereits früher konfiguriert habe.
Damit habe ich meinen WatchTask konfiguriert,
um die SCSS-Dateien zu überwachen und
sie dann automatisch durch Aufruf des SASS zu konvertieren.
Jetzt kann ich mit dem WatchTask mehrere Dateien beobachten
und dann automatisch die entsprechenden Aufgaben für diese Dateien aufrufen.
So kann ich zum Beispiel
meine JavaScript-Dateien beobachten und dann automatisch JS-Hinweise ausführen,
wenn sich meine Dateien ändern.
Oder Identifizierung zu tun und so weiter.
Nun, die nächste, die ich konfigurieren werde, ist BrowserSync.
Vergessen Sie das Komma nach dem WatchTask nicht,
und geben Sie dann BrowserSync ein.
Ich würde sagen, BrowserSync hier und dann für den BrowserSync,
ich würde sagen, konfigurieren Sie eine Aufgabe innerhalb.
Nun, dies ist die Syntax, die wir verwenden, um
die Konfiguration in unserer Grunt-Datei einzufügen.
Also sagt es BrowserSync dev.
Wenn Sie mich jetzt fragen, warum,
müssen wir nur die Dokumentation
für jedes dieser Plug-Ins lesen und dann herausfinden, wie diese Plug-Ins konfiguriert werden.
Also, ich habe bereits die Dokumentation gelesen und ich habe
einige grundlegende Setup für jede dieser Aufgaben herausgefunden, deshalb tippe ich sie einfach ein.
Wenn Sie mehr Flexibilität
wünschen, können Sie natürlich die entsprechende Dokumentation lesen und dann
andere Möglichkeiten zur Konfiguration dieser Aufgaben herausfinden.
Meine Konfiguration hier ist nur eine Möglichkeit, die Probleme zu lösen oder zu lösen.
Also hier gebe ich die BSFiles an,
also spezifiziert diese Datei, auf welche Dateien
von meinem BrowserSync überwacht werden müssen, und wenn sich eine dieser Dateien ändert,
wird mein BrowserSync dazu führen, dass der Browser neu geladen wird.
Also werde ich alle Dateien in meinem CSS-Ordner,
HTML-Dateien in meinem Projektordner
und dann alle meine JavaScript-Dateien im JS-Ordner beobachten.
Also, damit habe ich alle diese Dateien konfiguriert, auf denen ich eine Uhr halten werde,
und dann automatisch ein Neuladen meiner Seite verursachen, wenn nötig.
Und dann
ist die nächste Konfiguration, die ich tun muss, einige weitere Optionen, für meinen BrowserSync.
Die Optionen, die ich angeben werde, sind
WatchTask true, was bedeutet, dass ein WatchTask ausgeführt wird,
und das Basisverzeichnis für meinen Server.
Also sage ich BaseDir,
und dann gebe ich einen Punktschrägstrich an.
Also das aktuelle Verzeichnis,
als mein Basisverzeichnis.
Lassen Sie mich mit diesen Änderungen die Änderungen an meiner Grunt-Datei speichern,
und dann werde ich unten gehen und dann eine andere Grunt-Aufgabe konfigurieren, hier Standard genannt.
Also würde ich die Aufgabe als Standard angeben.
Was muss ich für diese Standardaufgabe tun?
Ich muss
BrowserSync ausführen und auch die zweite Aufgabe, die ich tun werde, ist beobachten.
Ich muss zuerst die BrowserSync-Aufgabe und dann später die WatchTask ausführen.
Da die BrowserSync-Aufgabe beginnt, meinen Server zu bedienen.
Wenn ich den WatchTask zuerst und die BrowserSync-Aufgabe später mache
,
stoppt der WatchTask grundsätzlich alles und dann werden alle verbleibenden Aufgaben dahinter nicht ausgeführt.
Wenn Sie also WatchTask verwenden,
tun Sie dies als letzte in der Sequenz, die Sie in diesen eckigen Klammern angeben.
Damit ist mein Projekt jetzt konfiguriert,
um meine SASS-Dateien zu überwachen und sie bei Bedarf zu servieren.
Also, das vervollständigt meine Grunt-Datei,
gehen wir zurück zu unserem Terminal.
Zurück zu meinem Terminal,
ich habe eine andere Registerkarte geöffnet und dann in dieser Registerkarte
werde ich die Grunt-Aufgabe ausführen,
die auch meinen BrowserSync läuft und
Dateien bereitstellt und automatisch die Webseite neu lädt,
wenn sich eine dieser Dateien ändert.
Wenn Sie also eine Aufgabe als Standardaufgabe konfigurieren, wie wir es in der Übung getan haben,
muss ich an der Eingabeaufforderung nur grunt eingeben und dann wird die Standardaufgabe automatisch ausgeführt.
Sobald meine Grunt-Aufgaben ausgeführt werden,
können Sie sehen, dass es den BrowserSync gestartet hat und
die Dateien bereitstellt und auch die WatchTask ausgeführt
wird, die darauf wartet, dass Änderungen automatisch die SCSS-Aufgabe ausgeführt werden.
Um Ihnen zu zeigen, wie die SCSS-Aufgabe ausgelöst wird,
wenn ich Änderungen an meiner Styles.scss-Datei vornehme,
also habe ich die Styles.scss-Datei heraufgebracht,
und ich werde diese Datei einfach speichern.
Und dann werden Sie feststellen, dass sofort
auf der linken Seite die SASS-Task aufgerufen wird und ausgeführt wird und dann neu kompiliert
wird, und dies führt auch dazu, dass die Styles.scss-Datei geändert wird, nachdem sie neu kompiliert wurde.
Dann löst dies den BrowserSync aus, meine Webseite automatisch neu zu laden.
Damit absolvieren wir unsere Grunze Teil 1 Übung.
Dies ist ein guter Zeitpunkt,
um Ihre Dateien im Git-Repository mit der Nachricht Grunt Teil eins zu speichern.