Es gibt die folgenden Schritte:
1. Erstellen Sie ein neues Projekt Bejs
2. Erstellen Sie ein neues Dateipaket.json
3. Erstellen Sie eine neue Datei gruntfile.js
4. Führen Sie Grunzaufgaben in der Befehlszeile aus
1. neues Projekt Bejs
Der Quellcode wird unter SRC platziert und das Verzeichnis verfügt über zwei Subdirektorien und JS. JS dezentralisiert selector.js und ajax.js, die im vorherigen Artikel erörtert wurde, wie sie zusammengeführt und komprimiert werden. Dieser Artikel konzentriert sich nur auf das Asset -Verzeichnis, das einige Bilder und CSS -Dateien enthält. In einer Weile werden die beiden CSS -Ressourcen zurückgesetzt. Eine Merge-Version All.css, eine komprimierte Version All-min.css.
2. Erstellen Sie ein neues Paket.json
Package.json wird in das Root -Verzeichnis platziert und seine Bedeutung wurde im vorherigen Artikel eingeführt. 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-Contribrib-Concat": "~ 0,1.1",
"Grunt-CSS": "> 0.0.0"
}
}
Der vorherige Artikel der Grunz-Contrib-Concat wurde eingeführt. Grunt-CSS ist das Plugin, das in diesem Artikel verwendet werden soll.
Ö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 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.
Der Quellcode ist wie folgt
Die Codekopie lautet wie folgt:
module.exports = function (grunn) {
// Konfiguration
grunT.initconfig ({{
PKG: GrunT.File.Readjson ('package.json'),
concat: {
CSS: {
SRC: ['SRC/Asset/*. CSS'],
Ziel: 'Dest/Asset/All.css' '
}
},
cssmin: {
CSS: {
SRC: 'Dest/Asset/All.css',
Ziel: 'Dest/Asset/All-min.css' '
}
}
});
// Ladeconat- und CSS -Plugins für Zusammenführungen bzw. Komprimierung laden
grunT.loadnpmtasks ('GrunT-contrib-concat');
GrunT.loadnpmtasks ('GrunT-CSS');
// Standardaufgabe
GrunT.registerTask ('Standard', ['concat', 'cssmin']);
};
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
Zu diesem Zeitpunkt werden die CSS -Verschmelzung und die Komprimierung abgeschlossen.