Grunzen - Aufgaben konfigurieren

Sie können projektspezifische Konfigurationsdaten für Grunt in der Datei Gruntfile.js definieren .

Grunzkonfiguration

Die Aufgabenkonfigurationsdaten können in der Grunt-Datei mithilfe der Methode grunt.initConfig () initialisiert werden. Innerhalb der grunt.initConfig () Funktion, nehmen Sie die Konfigurationsinformationen aus package.json Datei. Die Konfiguration enthält eine Aufgabe mit dem Namenproperties und beliebige Daten.

grunt.initConfig({
   jshint: {
      // configuration for jshint task
   },
   cssmin: {
      // configuration for cssmin task
   },
   // Arbitrary non-task-specific properties
   my_files: ['dir1/*.js', 'dir2/*.js'],
});

Aufgabenkonfiguration und Ziele

Wenn Sie eine Aufgabe ausführen, sucht Grunt unter der Eigenschaft task-name nach der Konfiguration. Wir werden Aufgaben mit mehreren Konfigurationen und Zieloptionen definieren, wie unten gezeigt -

grunt.initConfig({
   jshint: {
      myfile1: {
         // configuration for "myfile1" target options
      },
      myfile2: {
         // configuration for "myfile2" target options
      },
   },
   cssmin: {
      myfile3: {
         // configuration for "myfile3" target options
      },
   },
});

Hier hat die Aufgabe jshint die Ziele myfile1 und myfile2 und die Aufgabe cssmin das Ziel myfile3 . Wenn Sie das Grunzen jshint ausführen , wird es sowohl über die Aufgabe als auch über das Ziel iteriert, um die Konfiguration des angegebenen Ziels zu verarbeiten.

Optionen

Definieren Sie die Eigenschaft options in der Taskkonfiguration, die die Task-Standardeinstellungen überschreibt. Jedes Ziel enthält die Eigenschaft options , die die Optionen auf Aufgabenebene überschreibt. Es wird das folgende Format haben -

grunt.initConfig({
   jshint: {
      options: {
         // task-level options that overrides task defaults
      },
      myfile: {
         options: {
            // "myfile" target options overrides task defaults
         },
      },

      myfile1: {
         // there is no option, target will use task-level options
      },
   },
});

Dateien

Grunt bietet einige Ideen zum Festlegen, für welche Dateien die Aufgabe ausgeführt werden soll, und verwendet verschiedene Methoden zum Festlegen der Zuordnungen von src-dest- Dateien. Im Folgenden sind einige der zusätzlichen Eigenschaften aufgeführt, die von den Zuordnungen src und dest unterstützt werden :

• filter- Diese Funktion gibt den übereinstimmenden src- Dateipfad an und gibt wahre oder falsche Werte zurück.

• nonull - Es definiert die nicht übereinstimmenden Muster, wenn es auf true gesetzt ist.

• dot - Es stimmt mit den Dateinamen überein, die mit einem Punkt oder auf andere Weise beginnen.

• matchBase - Es stimmt die Muster, die Schrägstriche enthalten, mit dem Basisnamen des Pfads ab.

• expand - Es verarbeitet die Zuordnung der src-dest-Datei.

Kompaktes Format

Es gibt die Zuordnung der src-dest-Datei pro Ziel an, die für schreibgeschützte Aufgaben verwendet werden kann und nur die Eigenschaft src und keine Eigenschaft dest erfordert .

grunt.initConfig({
   jshint: {
      myfile1: {
         src: ['src/file1.js','src/file2.js']
      },
   },
   cssmin: {
      myfile2: {
         src: ['src/file3.js','src/file4.js'],
         dest: 'dest/destfile.js',
      },
   },
});

Dateiformatformat

Es gibt die Zuordnung der src-dest-Datei pro Ziel an, in der der Eigenschaftsname dest file und der Wert src file ist.

grunt.initConfig({
   jshint: {
      myfile1: {
         files: {
            'dest/destfile.js':['src/file1.js','src/file2.js'],
            'dest/destfile1.js':['src/file3.js','src/file4.js'],
         },
      },
      myfile2: {
         files: {
            'dest/destfile2.js':['src/file22.js','src/file23.js'],
            'dest/destfile21.js':['src/file24.js','src/file25.js'],
         },
      },
   },
});

Datei-Array-Format

Es gibt die Zuordnung der src-dest-Datei pro Ziel an, indem zusätzliche Eigenschaften pro Zuordnung verwendet werden.

grunt.initConfig({
   jshint: {
      myfile1: {
         files: [
            {src:['src/file1.js','src/file2.js'],dest:'dest/file3.js'},
            {src:['src/file4.js','src/file4.js'],dest:'dest/file5.js'},
         ],
      },
      myfile2: {
         files: [
            {src:['src/file6.js','src/file7.js'],dest:'dest/file8/', nonull:true},
            {src:['src/file9.js','src/file10.js'],dest:'dest/file11/', filter:'isFalse'},
         ],
      },
   },
});

Ältere Formate

Das Ziel-als-Ziel- Dateiformat war vor dem Vorhandensein der Multitasks vorhanden, bei denen der Zieldateipfad der Name des Ziels ist. Das folgende Format ist veraltet und darf nicht im Code verwendet werden.

grunt.initConfig({
   jshint: {
      'dest/destfile2.js':['src/file3.js','src/file4.js'],
      'dest/destfile5.js':['src/file6.js','src/file7.js'],
   },
});

Benutzerdefinierte Filterfunktion

Mithilfe der Filtereigenschaft können Sie den Zieldateien mit einem hohen Detaillierungsgrad helfen . Das folgende Format bereinigt Dateien nur, wenn sie mit einer tatsächlichen Datei übereinstimmen.

grunt.initConfig({
   clean: {
      myfile:{
         src: ['temp/**/*'],
         filter: 'isFile',
      },
   },
});

Globbing Patterns

Globbing bedeutet, den Dateinamen zu erweitern. Grunt unterstützt das Globbing mithilfe der integrierten Node-Glob- und Minimatch-Bibliotheken . Das Globbing-Muster enthält die folgenden Punkte:

• * entspricht einer beliebigen Anzahl von Zeichen, jedoch nicht / .
• ? entspricht einem einzelnen Zeichen, aber nicht / .
• ** entspricht einer Reihe von Zeichen, einschließlich / .
• {} gibt eine durch Kommas getrennte Liste von "oder" Ausdrücken an.
• ! negiert die Musterübereinstimmung am Anfang.

Zum Beispiel -

{src: 'myfile/file1.js', dest: ...} // it specifies the single file

{src: 'myfile/*.js', dest: ...} //it matches all the files ending wth .js

{src: 'myfile/{file1,file2}*.js', dest: ...} //defines the single node glob pattern

{src: ['myfile/*.js', '!myfile/file1.js'], dest: ...} // all files will display in alpha

// order except for file1.js

Dynamisches Erstellen des Dateiobjekts

Wenn Sie mit einzelnen Dateien arbeiten, können Sie zusätzliche Eigenschaften verwenden, um eine Dateiliste dynamisch zu erstellen. Wenn Sie die einstellenexpand Eigenschaft auf true, aktiviert es einige der folgenden Eigenschaften -

• cwd ordnet alle src diesem Pfad zu.

• src stimmt mit den übereinstimmenden Mustern relativ zum cwd überein .

• Die Eigenschaft dest gibt das Zielpfadpräfix an.

• ext ersetzt eine vorhandene Erweiterung durch einen Wert, der in dest- Pfaden generiert wird .

• extDot gibt an, wo sich der Zeitraum befindet, der die Erweiterung angibt. Es wird entweder die erste oder die letzte Periode verwendet. Standardmäßig ist die erste Periode eingestellt

• Durch Reduzieren werden alle Pfadteile aus den Zielpfaden entfernt .

• Umbenennen gibt eine Zeichenfolge an, die das neue Ziel und den neuen Dateinamen enthält.

Die Umbenennungseigenschaft

Es ist eine eindeutige JavaScript-Funktion, die eine Zeichenfolge zurückgibt, und Sie können keinen Zeichenfolgenwert zum Umbenennen verwenden. Im folgenden Beispiel wird die Kopie wird Aufgabe eine Sicherung README.md erstellen.

grunt.initConfig({
   copy: {
      backup: {
         files: [{
            expand: true,
            src: ['docs/README.md'],    // creating a backup of README.md
            rename: function () {       // specifies the rename function
               return 'docs/BACKUP.txt'; // returns a string with the complete destination
            }
         }]
      }
   }
});

Vorlagen

Sie können die Vorlagen mit <%%> Trennzeichen angeben . Sie werden automatisch erweitert, wenn sie aus der Konfiguration gelesen werden. Es enthält zwei Arten von Eigenschaften -

• <%= prop.subprop %>Die Eigenschaft wird verwendet, um den Wert von prop.subprop in der Konfiguration zu erweitern, der auf die Zeichenfolgenwerte, Arrays und andere Objekte verweisen kann.

• <% %> Die Eigenschaft führt den Inline-JavaScript-Code aus, der für den Kontrollfluss oder die Schleife verwendet wird.

Zum Beispiel -

grunt.initConfig({
   concat: {
      myfile: {
         options: {
            banner: '/* <%= val %> */\n',
         },
         src: ['<%= myval %>', 'file3/*.js'],
         dest: 'build/<%= file3 %>.js',
      },
   },
   // properties used in task configuration templates
   file1: 'c',
   file2: 'b<%= file1 %>d',
   file3: 'a<%= file2 %>e',
   myval: ['file1/*.js', 'file2/*.js'],
});

Externe Daten importieren

Sie können externe Daten aus der Datei package.json importieren . Das Grunt-Contrib- Uglify- Plugin kann zum Minimieren der Quelldatei verwendet werden und erstellt mithilfe von Metadaten einen Bannerkommentar. Sie können grunt.file.readJSON und grunt.file.readYAML zum Importieren von JSON- und YAML-Daten verwenden.

Zum Beispiel -

grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),
   uglify: {
      options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      dist: {
         src: 'src/<%= pkg.name %>.js',
         dest: 'dist/<%= pkg.name %>.min.js'
      }
   }
});