Aufgaben (Aufgaben) zum Erstellen von Webprogrammen mit GruntJS

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

WBOY

Freigeben： 2016-05-16 16:45:44

Original

1372 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

Code kopieren Der Code lautet wie folgt:

 
module.exports = function(grunt) {

 grunt.registerTask('mytask', 'Die einfachste Aufgabendemonstration, Drucken verschiedener Ausgaben entsprechend Parametern.', function(arg1, arg2) {
 if (arguments.length === 0) {
 grunt.log.writeln('task' this.name ", keine Parameter übergeben");
 } else if (arguments.length == = 1) {
         grunt.log.writeln('Task' this.name ", ein Parameter ist " arg1); .name ", es gibt zwei Parameter: " arg1 ", " arg2);
        🎜>   });

 grunt.registerTask('default', 'Default task', function( ) {
                                                                                                                                                                                                                                                     
Geben Sie die Befehlszeile ein und geben Sie grunt ein

Um mehrere Aufgaben aufzurufen, übergeben Sie sie einfach durch Kommas getrennt oder in Array-Form an die Ausführungsmethode

Code kopieren

Der Code lautet wie folgt:

grunt.registerTask('default', ' Standardaufgabe ', function() { grunt.task.run('mytask1', 'mytask2') // oder grunt.task.run(['mytask1', 'mytask2']) })