Es gibt wahrscheinlich die folgenden Schritte
Neues Projekt Bejs
Erstellen Sie ein neues Dateipaket.json
Erstellen Sie eine neue Datei gruntfile.js
Führen Sie Grunzaufgaben in der Befehlszeile aus
1. neues Projekt Bejs
Der Quellcode wird unter SRC platziert und das Verzeichnis enthält zwei JS -Dateien, selector.js und ajax.js. Nach der Kompilierung wird der Code in Dest platziert, und dieser Grunzen wird automatisch generiert.
2. Erstellen Sie ein neues Paket.json
Package.json wird in das Stammverzeichnis platziert und enthält einige Meta -Informationen des Projekts, z. B. Projektname, Beschreibung, Versionsnummer, Abhängigkeitspaket usw. Es sollte an SVN oder Git wie den Quellcode übermittelt werden. Die aktuelle Projektstruktur ist wie folgt
Paket.json -Inhalt muss den JSON -Syntaxspezifikationen wie folgt entsprechen
Die Codekopie lautet wie folgt:
{
"Name": "Bejs",
"Version": "0.1.0",
"devDependencies": {{
"Grunzen": "~ 0.4.0",
"Grunz-contrib-jsint": "~ 0.1.1",
"Grunz-contrib-uglify": "~ 0,1,2",
"Grunzen-Contrib-Concat": "~ 0,1.1"
}
}
Grunzen in DevDependencies wurde im vorherigen Artikel installiert, während Grunz-contrib-jsint/grunz-contrib-exlify/grunzkontrib-concat nicht installiert ist. Drei für drei Aufgaben
Grunz-contrib-js-Syntaxprüfung
Grunzkontrib-Uuglify-Komprimierung unter Verwendung von UglifyJs
Grunzen-Contrib-Concat-Fusionsdateien
Öffnen Sie zu diesem Zeitpunkt das Befehlszeilen -Tool und geben Sie das Projekt Root -Verzeichnis ein und geben Sie den folgenden Befehl ein: NPM Installation
Überprüfen Sie das Root -Verzeichnis erneut und stellten fest, dass ein zusätzliches Node_Modules -Verzeichnis vorhanden ist, einschließlich vier Unterverzeichnisse, siehe Bild
3. Erstellen Sie eine neue Datei gruntfile.js
Grunnfile.js wird ebenfalls in das Projekt Root Directory platziert. Fast alle Aufgaben sind in dieser Datei definiert. Es ist eine gewöhnliche JS -Datei, in der ein JS -Code anstelle von JSON geschrieben werden kann. Wie Paket.json muss es wie den Quellcode an SVN oder Git eingereicht werden.
Gruntfile.js besteht aus dem folgenden Inhalt
Die Wrapper -Funktion hat die folgende Struktur. Dies ist eine typische Methode, um Node zu schreiben.js. Verwenden Sie Exporte, um die API freizulegen
Die Codekopie lautet wie folgt:
module.exports = function (grunn) {
// hier grunzbezogene Dinge tun
};
Projekt- und Aufgabenkonfiguration
Laden Sie Grunzen -Plugins und -aufgaben
Passen Sie die Ausführung von Aufgaben an
In diesem Beispiel werden die folgenden Aufgaben abgeschlossen
Führen Sie die Dateien unter src (ajax.js/selector.js) mit domop.js zusammen
Compress domop.js zu domop.min.js
Beide Dateien werden im Dest -Verzeichnis platziert
Die endgültige Gruntfile.js ist wie folgt
Die Codekopie lautet wie folgt:
module.exports = function (grunn) {
// Konfiguration
grunT.initconfig ({{
PKG: GrunT.File.Readjson ('package.json'),
concat: {
Domop: {
src: ['src/ajax.js', 'src/selector.js'],
Ziel: 'dest/domop.js' '
}
},
Uglify: {
Optionen: {
Banner: '/*! < %= pkg.name %> < %= grunn.template.today ("yyyy-mm-dd") %> *// n '
},
bauen : {
SRC: 'dest/domop.js',
Ziel: 'dest/domop.min.js' '
}
}
});
// Plugins laden und hässlich für Zusammenführungen bzw. Komprimierung
grunT.loadnpmtasks ('GrunT-contrib-concat');
grunT.loadnpMtasks ('GrunT-contrib-exlify');
// eine Aufgabe registrieren
GrunT.registerTask ('Standard', ['concat', 'Uglify']);
};
4. Führen Sie Grunzenaufgaben aus
Öffnen Sie die Befehlszeile, geben Sie das Projekt Root -Verzeichnis ein und klicken Sie auf Grun
Aus den Druckinformationen wird ersichtlich, dass die erfolgreiche Zusammenführung und Komprimierung generiert und das Dest -Verzeichnis und die erwarteten Dateien generiert werden. Zu diesem Zeitpunkt gibt es im Projektverzeichnis wie folgt mehr Ziele
OK, hier sind zwei gängige Aufgaben, conat und hässlich, jStint usw., die nicht eingeführt werden. Der Code in Gruntfile.js wird nacheinander nicht interpretiert. Interessierte Schüler finden es im offiziellen Dokument von Gruntjs.