js modulare Entwicklung – Gruntfile.js ausführliche Erklärung

1. Einführung in das Grunt-Modul

Das Grunt-Plug-in ist ein Automatisierungstool in der npm-Umgebung. Bei Aufgaben, die wiederholt wiederholt werden müssen, wie Komprimierung, Kompilierung, Unit-Tests, Linting usw., können automatisierte Tools Ihren Arbeitsaufwand reduzieren und Ihre Arbeit vereinfachen. Das Grunt-Modul führt Aufgaben basierend auf der Konfiguration in der Datei Gruntfile.js aus.
Wenn der folgende Befehl in package.json definiert ist:

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

"scripts": {
    "build": "npm install && grunt"
}

Weil npm run build ausgeführt wird Einige in devDependencies definierte Module werden zuerst installiert. Das Ausführen des Befehls npm run build entspricht der folgenden Vorgehensweise:

● npm install grunt-cli -g

● npm install

● grunt

2. Die Struktur von gruntfile.js:

● „Wrapper“-Funktion

● Projekt- und Aufgabenkonfiguration

● Laden von Grunz-Plugins und Aufgaben

● Benutzerdefinierte Aufgaben

3. „Wrapper“-Funktion

Jede Kopie von Gruntfile.js (und das Grunt-Plug-in) folgen alle dem gleichen Format. Der von Ihnen geschriebene Grunt-Code muss in dieser Funktion platziert werden:

module.exports = function(grunt){
         //do grunt-related things in here
}

4. Projekt- und Aufgabenkonfiguration

Groß Einige Grunt-Aufgaben basieren auf bestimmten Konfigurationsdaten. Wir konfigurieren die Parameter der Grunt-Aufgabe über die grunt.initConfig-Methode.
Der Parameter der grunt.initConfig-Methode ist ein JSON-Objekt. In diesem Konfigurationsobjekt können Sie beliebige Daten speichern. Da es sich außerdem um JavaScript handelt, können Sie hier jeden gültigen JS-Code verwenden. Sie können sogar die Vorlagenzeichenfolge verwenden, um auf die konfigurierten Eigenschaften zu verweisen, zum Beispiel:

// 项目和任务配置
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'), //获取 package.json 中的元数据(js代码)
  proj:{
    name:'hello',
    description:'a hello demo'
  },
  hello: {
    options: {
      name: ''  //用模板字符串匹配hello
    },
    srcs: ['1.txt', '2.txt']
  }
});

Eigenschaften, die in der grunt.initConfig-Methode konfiguriert sind, im Task-Modul kann die grunt.config-Methode sein Wird verwendet, um beispielsweise auf Folgendes zuzugreifen:

grunt.config("proj.name");

Darüber hinaus extrahiert das Grunt-Task-Modul automatisch die Attribute, die dem Task-Namen im Konfigurationsobjekt entsprechen, basierend auf dem Task-Namen. Zum Beispiel beim Definieren des Task-Hallo. Konfigurieren Sie im Attribut „Hallo“, das dem Konfigurationsobjekt entspricht, die Konfiguration und die Daten, die für die Aufgabenausführungsfunktion erforderlich sind.

5. Laden von Grunz-Plug-In-Aufgaben

Um Doppelarbeit zu reduzieren, können wir vorhandene Plug-In-Aufgaben laden.

1. Laden Sie Ihr eigenes privates Grunz-Plug-in

Sie können einige Ihrer eigenen definierten Aufgabenskripte im selben Verzeichnis ablegen und sie aus dem angegebenen Verzeichnis laden die grunt.loadTasks-Methode Alle Grunt-Task-Skripte in diesem Verzeichnis.

2. Laden Sie das in npm veröffentlichte Grunt-Plug-in

Gemeinsame Aufgaben wie grunt-contrib-copy und grunt-contrib-uglify wurden als Grunt-Plugin implementiert. ins Das Formular wurde in der öffentlichen Bibliothek von npm entwickelt und veröffentlicht. Solange die zu verwendenden Plug-Ins in der Abhängigkeit in der Datei package.json aufgeführt und über npm install installiert sind, kann die Aufgabe direkt geladen werden.

// 加载能够提供"copy"任务的插件。
grunt.loadNpmTasks('grunt-contrib-copy');

3. Alle Plug-Ins, die mit „grunt-“ beginnen, direkt laden

Es gibt ein Load-Grunt-Tasks-Plug-In auf npm, das verwendet werden kann um alle Plug-ins in der Abhängigkeitsliste zu laden. Plug-ins, die mit „grunt-“ beginnen.
Listen Sie die Plug-Ins auf, die verwendet werden müssen, beginnend mit „grunt-“ in der Abhängigkeit, und rufen Sie sie dann in Gruntfile.js auf.

//Load grunt tasks from NPM packages
load-grunt-tasks

6. Benutzerdefinierte Aufgaben

1. Definieren Sie direkt das Verhalten der Aufgabe

grunt.registerTask('hello', 'Show some msg', function() {
  console.log(this.options().name); //输出hello
});

2. Definition Für die Aufgabenliste

kann eine Aufgabe als Kombination einer Reihe von Aufgaben definiert werden, die nacheinander ausgeführt werden.

grunt.registerTask('dothings', 'copy and Show some msg', ['copy','hello']);

3. Standardaufgaben definieren

Durch die Definition der Standardaufgabe können Sie Grunt standardmäßig eine oder mehrere Aufgaben ausführen lassen. Wenn Sie beim Ausführen des Grunt-Befehls keine Aufgabe angeben, wird die Standardaufgabe ausgeführt. Wenn unten definiert, entspricht die Ausführung von grunt der Ausführung von grunt hello.

grunt.registerTask('default', ['hello']);

4. Zusammengesetzte Aufgaben definieren

Die zusammengesetzte Aufgabe kann die entsprechenden in der grunt.initConfig-Methode konfigurierten Attribute festlegen . Die definierten Attribute werden der Reihe nach als Ziel:Datenpaare verarbeitet.

module.exports = function(grunt) {
    grunt.initConfig({
        Log: {
            options: {
                sep: ';'
            },
            srcs: ['1.txt', '2.txt'],
            dests: ['d1.txt', 'd2.txt']
        }
    });
    grunt.registerMultiTask("Log", function() {
        var options = this.options({ sep: '&' });
        console.log(this.target); 
        console.log(this.data.join(options.sep));
    });
};

Das Ausführen von grunt Log gibt Folgendes aus:

Running "Log:srcs" (Log) task
srcs
1.txt;2.txt
Running "Log:dests" (Log) task
dests
d1.txt;d2.txt

定义任务行为Tips

1.任务内部可以执行其他的任务。

grunt.registerTask('mytask', function() {
  grunt.task.run('task1', 'task2');
  // Or:
  grunt.task.run(['task1', 'task2']);
});

2.定义异步任务

grunt.registerTask('mytask', function() {
  var done = this.async();
  //do something
  done();
});

3.当任务失败时，所有后续任务都将终止

在任务中，当执行失败，可以return false来表明当前任务执行失败，一般，多个任务按顺序执行，如果有任务失败时，所有后续任务都将终止。可以通过在命令行后加上--force来使有任务失败时，后续任务能继续进行。

4.任务中检查前置任务状态

有些任务可以依赖于其他任务的成功执行。通过grunt.task.requires方法来检查其前置任务是否已经执行，并且没有失败。

5.任务中检查配置属性

可以用方法grunt.task.requiresConfig指定一个或者多个字符串或者数组的配置属性为必需的。如果一个或多个必需的配置属性缺失，就通知系统当前任务失败。

本文来自 js教程 栏目，欢迎学习！  

Das obige ist der detaillierte Inhalt vonjs modulare Entwicklung – Gruntfile.js ausführliche Erklärung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!