Heim > Web-Frontend > js-Tutorial > Aufgaben (Aufgaben) zum Erstellen von Webprogrammen mit GruntJS_node.js

Aufgaben (Aufgaben) zum Erstellen von Webprogrammen mit GruntJS_node.js

WBOY
Freigeben: 2016-05-16 16:45:44
Original
1382 Leute haben es durchsucht

So passen Sie Grunt-Aufgaben an

Manchmal müssen wir einige unserer eigenen Grunzaufgaben schreiben, hier ist ein konkretes Beispiel

1. Vorbereitung

1. Erstellen Sie ein neues Verzeichnis g1
2. Erstellen Sie eine neue package.json und fügen Sie sie in g1 ein
3. Erstellen Sie eine neue Gruntfile.js und fügen Sie sie in g1 ein

package.json

Code kopieren Der Code lautet wie folgt:
{
"name": " g1“,
„version“: „0.1.0“,
„Autor“: „@snandy“,
„homepage“: „http://www.g1.com“,
„devDependencies“ : {
„grunt“: „~0.4.0“
}
}

4. cd in g1, npm install, um das Grunt-Paket zu installieren

Die gesamte Verzeichnisstruktur ist wie folgt

Gruntfile.js ist vorübergehend leer.

2. Erstellen Sie die einfachste Aufgabe

grunt.registerTask(taskName, [description,] taskFunction)

taskName Aufgabenname, verwenden Sie grunt in der Befehlszeile taskName

Beschreibung Beschreibung der Aufgabe
taskFunction Implementierung der Aufgabe

Füllen Sie den Code in Gruntfile.js ein

Code kopieren Der Code lautet wie folgt:
module.exports = function(grunt) {
grunt.registerTask('mytask', 'Eine einfachste Aufgabendemonstration, verschiedene Ausgaben entsprechend Parametern drucken.', function(arg1, arg2) {
                                                                                                   .log.writeln('Task' this.name ", no übergebene Parameter");
        } else if (arguments.length === 1) {
          grunt.log.writeln('Task' this.name ", one parameter is " arg1);
    } else {
          grunt.log.writeln('task' this.name ", es gibt zwei Parameter: " arg1 ", " arg2);
}
});
};


Registrierte eine Aufgabe „mytask“, um die einfachste Möglichkeit zu implementieren, unterschiedliche Druckausgaben basierend auf verschiedenen übergebenen Parametern zu erreichen. Um die laufenden Ergebnisse anzuzeigen, müssen wir die Befehlszeile eingeben.

Gehen Sie in das g1-Verzeichnis und geben Sie grunt mytask ein

Geben Sie grunt mytask:snandy erneut ein


Fügen Sie nach dem Aufgabennamen einen Doppelpunkt hinzu, um Parameter zu übergeben

Grunzen Sie mytask:snandy:backus


Sie können mehrere Parameter durch Doppelpunkt getrennt übergeben

3. Erstellen Sie mehrere Aufgaben gleichzeitig

grunt.registerMultiTask(taskName, [description,] taskFunction)

Sie können sehen, dass die Parameter gleich sind, aber die Methodennamen unterschiedlich sind. Die Verwendungsmethode ist jedoch anders. Sie müssen zuerst die Konfiguration von Gruntfile.js wie folgt initialisieren

Code kopieren Der Code lautet wie folgt: module.exports = function(grunt) {
grunt.initConfig({
log: {
t1: [1, 2, 3],
t2: 'hello world',
t3: false
}
});

grunt.registerMultiTask('log', 'Log stuff.', function() {
grunt.log.writeln(this.target ': ' this.data);
});
};



Geben Sie das g1-Verzeichnis ein und testen Sie es separat
Grunzen Sie ein und die drei Unteraufgaben t1, t2, t3 werden nacheinander ausgeführt

Geben Sie grunt log:t1, grunt log:t2 bzw. grunt log:t3 ein

4. Kommunikation zwischen Aufgaben

Sie können eine andere Aufgabe innerhalb einer Aufgabe wie folgt aufrufen

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage