GrunT basiert auf Node.js und wird in JS entwickelt. Auf diese Weise können Sie Node.js verwenden, um Kreuzsysteme und plattformübergreifende Desktop-Operationen wie Dateioperationen usw. zu realisieren. Zusätzlich werden Grunzen und seine Plug-Ins als Paket verwendet, das mithilfe der NPM-Installation verwaltet werden kann.
Daher kann die von NPM generierte Paket.json-Projektdatei das im aktuelle Projekt verwendete GrunT-Plug-In aufzeichnen, und GrunT nennt die Gruntfile.js-Datei, die Aufgaben (Aufgaben) analysieren und entsprechende Vorgänge ausführen.
Grunzen-Cli installieren
In der Tat soll GrunT-Cli installiert werden, wo die Befehlszeilenschnittstelle (CLI) von Grunn installiert ist. Danach wird der Grunzenbefehl in der Eingabeaufforderung erkannt. Die Installation von Grunzen-Cli wird nicht als Installation von Grunzen bezeichnet. Dies liegt daran, dass Grunzen selbst weltweit nicht verwendet wird. Wenn Sie Grunn verwenden möchten, müssen Sie Grunzen einmal für ein bestimmtes Arbeitsverzeichnis installieren. Dies liegt auch daran, dass unterschiedliche Arbeitsverzeichnisse unterschiedliche Automatisierungsarbeiten über Grunzen erfordern, daher muss sie unabhängig voneinander konfiguriert werden.
npm install -g grunkt -cli
―Save-dev Parameter, der angibt, dass die neu installierte Sache zur Datei package.json hinzugefügt wird.
Generieren Sie die Datei package.json
NPM hat eine Voraussetzung für das Arbeitsverzeichnis. Diese Anforderung ist: Es gibt ein Paket.json am Stammverzeichnisort.
dokumentieren. Diese Datei definiert einige Projektinformationen (Name, Beschreibung), die dem Arbeitsverzeichnis entsprechen, sowie die Abhängigkeiten des Pakets (dh das NPM -Modul).
Führen Sie den folgenden Befehl aus, um zu initialisieren
npm init
Installieren Sie Grunzen und benötigte Plugins für das aktuelle Arbeitsverzeichnis
Methode 1
Wir haben Grunzen zuvor im globalen Verzeichnis installiert, und jetzt müssen wir es in den aktuellen Projektpfad einführen. Gleichzeitig können die erforderlichen Plugins diese enthalten:
Fusionsdateien: Grunz-Contrib-Concat
Syntaxprüfung: Grunzen-Contrib-Jshint
SCSS Compiled: Grunz-Contrib-Sass
Komprimierte Datei: Grunz-Contrib-Uuglify
Hören Sie sich Dateiänderungen an: Grunzen-Contrib-Watch
Erstellen Sie einen lokalen Server: Grunzen-Contrib-Connect
Die Art und Weise, wie sie installiert werden können, ist:
NPM Installation-Save-Dev Gruntnpm Install-Save-Dev Plugin 1 Plugin 2 Plugin 3
Zu diesem Zeitpunkt gibt es im Ordner package.json einen zusätzlichen Code.
"DevDependencies": {"Grunzen": "0.4.1"},Methode 2 - Paket ändern.json manuell
"DevDependenzen": {"Grunzen": "~ 0.4.1", "Grunzen-contrib-cssmin": "~ 0.7.0"}Fügen Sie dieses Feld manuell in die Datei package.json hinzu und fügen Sie die Pakete hinzu, von denen abhängig sein muss. Wenn Sie nur die neueste Version installieren müssen, können Sie sie in * ändern und dann die NPM -Installation ausführen. Sie werden feststellen, dass im Ordner ein Node_Modules-Ordner vorhanden ist, in dem die von uns benötigten Plug-Ins gespeichert sind.
Konfiguration
Verwenden Sie im Allgemeinen Vorlagen direkt als Konfigurationsdateien.
module.exports = function (grunT) {"strict verwenden"; grunT.initconfig ({// Plugin -Konfigurationsbereich}); // Laden von Plugin-Aufgaben laden Sie, wer auch immer Sie Grunn.loadnpMtasks verwenden möchten ('GrunT-contrib-exlify'); grunT.loadnpmtasks ('GrunT-contrib-cssmin'); GrunT.loadnpmtasks ('GrunT-contrib-iMagemin'); // Task -Task Grunt.registerTask ('Standard', ['CSSMin', 'Imagemin', 'Uglify']);};GrunT.loadNpMtasks () ist eine Lade -Plugin -Aufgabe. Wenn Sie die Funktion welches Plugin verwenden möchten, verwenden Sie diesen Code, um die Plugin -Aufgabe in diesem Teil hinzuzufügen.
GrunT.registerTask () ist eine registrierte Aufgabe, und es gibt standardmäßig einen Standard. Die Standardeinstellung bedeutet, dass Sie bei der letzten Verwendung direkt in die Eingabeaufforderung im Verzeichnis Grunzen eingeben können, um die registrierte Aufgabe auszuführen, die der Ausführung der Standardaufgabe entspricht.
Verwendung benutzerdefinierter Aufgaben
Weitere Aufgabenbefehle können registriert und andere Namen verwendet werden. Zum Beispiel
GrunT.registerTask ('Custom', ['Cssmin', 'Imagemin']);Geben Sie bei der Verwendung ein:
Grunzenmitte