Erste Schritte mit Grunt (automatischer Task-Runner)_Javascript-Kenntnisse

Während des Entwicklungsprozesses von Javascript stoßen Sie häufig auf einige sich wiederholende Aufgaben, wie das Zusammenführen von Dateien, das Komprimieren von Code, das Überprüfen auf Grammatikfehler, das Konvertieren von Sass-Code in CSS-Code usw. Normalerweise müssen wir unterschiedliche Werkzeuge verwenden, um unterschiedliche Aufgaben zu erledigen, was eine sich wiederholende Arbeit darstellt und sehr zeitaufwändig ist. Grunt ist ein zur Lösung dieses Problems entwickeltes Tool, das uns dabei helfen kann, verschiedene Aufgaben automatisch zu verwalten und auszuführen.

Um es einfach auszudrücken: Grunt ist ein automatischer Task-Runner, der automatisch eine Reihe von Aufgaben in einer voreingestellten Reihenfolge ausführt. Dies rationalisiert den Arbeitsablauf und reduziert die Belastung durch sich wiederholende Aufgaben.

## Installieren

Grunt basiert auf Node.js. Vor der Installation müssen Sie zuerst Node.js installieren und dann den folgenden Befehl ausführen.

sudo npm install grunt-cli -g

grunt-cli zeigt an, dass die Grunt-Befehlszeilenschnittstelle installiert ist, und der Parameter g gibt die globale Installation an.

Grunt verwendet eine Modulstruktur. Zusätzlich zur Installation der Befehlszeilenschnittstelle müssen Sie bei Bedarf auch entsprechende Module installieren. Diese Module sollten lokal installiert werden, da verschiedene Projekte möglicherweise unterschiedliche Versionen desselben Moduls erfordern.

Erstellen Sie zunächst eine Textdatei package.json im Stammverzeichnis des Projekts, um die für das aktuelle Projekt erforderlichen Module anzugeben. Hier ist ein Beispiel.

{ “name”: “my-project-name”, “version”: “0.1.0”, “author”: “Your Name”, “devDependencies”: { “grunt”: “0.x.x”, “grunt-contrib-jshint”: “<em>“, “grunt-contrib-concat”: “~0.1.1”, “grunt-contrib-uglify”: “~0.1.0”, “grunt-contrib-watch”: “~0.1.4” } }</em>

In der obigen package.json-Datei werden neben der Angabe des Namens und der Version des Projekts auch das Grunt-Modul und die Version, von denen das Projekt abhängt, im Attribut devDependencies angegeben: Das Grunt-Kernmodul ist die neueste Version 0.x.x und Das Jshint-Plug-In ist die neueste Version. Das Concat-Plug-In ist nicht niedriger als Version 0.1.1, das Uglify-Plug-In ist nicht niedriger als Version 0.1.0 und das Watch-Plug-In ist nicht niedriger als Version 0.1 .4.

Führen Sie dann den folgenden Befehl im Stammverzeichnis des Projekts aus und diese Plug-Ins werden automatisch im Unterverzeichnis node_modules installiert.

npm install

Die obige Methode ist für den Fall gedacht, dass package.json bereits vorhanden ist. Wenn Sie die Datei package.json automatisch generieren möchten, können Sie den Befehl npm init verwenden und den Anweisungen auf dem Bildschirm folgen, um den Namen und die Version des erforderlichen Moduls anzugeben.

npm init

Wenn die vorhandene Datei package.json das Grunt-Modul nicht enthält, können Sie bei der direkten Installation des Grunt-Moduls den Parameter --save-dev hinzufügen. Das Modul wird dann automatisch zur Datei package.json hinzugefügt.

npm install <module> —save-dev

Entsprechend dem in der Datei package.json oben angegebenen Modul müssen Sie beispielsweise den folgenden npm-Befehl ausführen.

npm install grunt —save-dev npm install grunt-contrib-jshint —save-dev npm install grunt-contrib-concat —save-dev npm install grunt-contrib-uglify —save-dev npm install grunt-contrib-watch —save-dev

## Befehlsskriptdatei Gruntfile.js

Nachdem das Modul installiert ist, besteht der nächste Schritt darin, eine neue Skriptdatei Gruntfile.js im Stammverzeichnis des Projekts zu erstellen. Es ist eine Konfigurationsdatei für Grunt, genau wie package.json eine Konfigurationsdatei für npm ist. Mit Gruntfile.js wird ein allgemeines Node.js-Modul geschrieben.

module.exports = function(grunt) { // 配置Grunt各种模块的参数 grunt.initConfig({ jshint: { / jshint的参数 <em>/ }, concat: { /</em> concat的参数 <em>/ }, uglify: { /</em> uglify的参数 <em>/ }, watch: { /</em> watch的参数 <em>/ } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks(‘grunt-contrib-jshint'); grunt.loadNpmTasks(‘grunt-contrib-concat'); grunt.loadNpmTasks(‘grunt-contrib-uglify'); grunt.loadNpmTasks(‘grunt-contrib-watch'); // 每行registerTask定义一个任务 grunt.registerTask(‘default', [‘jshint', ‘concat', ‘uglify']); grunt.registerTask(‘check', [‘jshint']); };</em>

Der obige Code verwendet drei Methoden des Grunt-Codes: grunt.initConfig: Definiert die Parameter verschiedener Module, und jedes Mitgliedselement entspricht einem Modul mit demselben Namen.
grunt.loadNpmTasks: Laden Sie die Module, die zum Abschließen der Aufgabe erforderlich sind. grunt.registerTask: Definieren Sie bestimmte Aufgaben. Der erste Parameter ist der Aufgabenname und der zweite Parameter ist ein Array, das die Module angibt, die die Aufgabe nacheinander verwenden muss. Der Standardaufgabenname gibt das aufzurufende Modul an (in diesem Beispiel jshint, concat und uglify), wenn der Grunt-Befehl direkt ohne Parameter eingegeben wird. Die Prüfaufgabe gibt in diesem Beispiel an, dass das jshint-Plug-in verwendet wird, um die Syntaxprüfung durchzuführen Code.
Der obige Code lädt insgesamt vier Module: jshint (Prüfung auf Syntaxfehler), concat (Dateien zusammenführen), uglify (Code komprimieren) und watch (automatische Ausführung). Als nächstes gibt es zwei Möglichkeiten, es zu verwenden.

(1) Führen Sie ein bestimmtes Modul über die Befehlszeile aus, z. B.

grunt jshint

Der obige Code zeigt die Ausführung des Jshint-Moduls an.

(2) Die Befehlszeile führt eine bestimmte Aufgabe aus. Zum Beispiel

grunt check

Der obige Code zeigt an, dass die Prüfaufgabe ausgeführt wird. Wenn der Vorgang erfolgreich ist, wird „Fertig, ohne Fehler“ angezeigt.

Wenn kein Aufgabenname angegeben ist, genügt die Eingabe von grunt, um die Standardaufgabe auszuführen.

## Gruntfile.js-Beispiel: grunt-contrib-cssmin-Modul

Im Folgenden wird das CSSmin-Modul verwendet, um zu demonstrieren, wie die Datei Gruntfile.js geschrieben wird. Das cssmin-Modul wird zum Minimieren von CSS-Dateien verwendet.

Installieren Sie zunächst das Modul im Stammverzeichnis Ihres Projekts.

npm install grunt-contrib-cssmin —save-dev

Erstellen Sie dann eine neue Datei Gruntfile.js.

module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘<em>.css', ‘!</em>.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };

Die drei Methoden im obigen Code werden im Folgenden ausführlich erläutert und wir werden sie einzeln betrachten.

(1)grunt.initConfig

Die Methode grunt.initConfig wird zur Modulkonfiguration verwendet und akzeptiert ein Objekt als Parameter. Die Mitglieder dieses Objekts entsprechen den verwendeten gleichnamigen Modulen. Da wir das cssmin-Modul konfigurieren, gibt es darin ein cssmin-Mitglied (Eigenschaft).

cssmin (Eigenschaft) zeigt auf ein Objekt, das mehrere Mitglieder enthält. Zusätzlich zu einigen Systemsatzmitgliedern (z. B. Optionen) werden andere benutzerdefinierte Mitglieder als Ziele bezeichnet. Ein Modul kann mehrere Ziele haben. Das eine ist „minify“, das zum Komprimieren von CSS-Dateien verwendet wird, das andere ist „combine“, das zum Zusammenführen mehrerer CSS-Dateien verwendet wird . dokumentieren.

Informationen zu den spezifischen Einstellungen der einzelnen Ziele finden Sie in der Dokumentation der Vorlage. Was cssmin betrifft, ist die spezifische Bedeutung der Parameter des Minimierungsziels wie folgt:

expand: Wenn auf true gesetzt, bedeutet dies, dass der Platzhalter des folgenden Dateinamens (d. h. die -Nummer) zu einem bestimmten Dateinamen erweitert werden muss.
cwd: Das Verzeichnis, in dem sich die zu verarbeitende Datei (Eingabe) befindet. src: Gibt die Datei an, die verarbeitet werden muss. Wenn es sich um ein Array handelt, ist jedes Element im Array ein Dateiname und es können Platzhalter verwendet werden.
dest: Gibt den Namen oder das Verzeichnis der verarbeiteten Datei an. ext: stellt den Suffixnamen der verarbeiteten Datei dar.
Zusätzlich zu den oben genannten Parametern gibt es auch einige Parameter, die allen Grunt-Modulen gemeinsam sind.

filter: Eine Funktion, die einen booleschen Wert zum Filtern von Dateinamen zurückgibt. Nur Dateien mit einem Rückgabewert von true werden von grunt verarbeitet. Punkt: Ob Systemdateien abgeglichen werden sollen, die mit einem Punkt (.) beginnen.
makeBase: Wenn auf true gesetzt, wird nur der letzte Teil des Dateipfads abgeglichen. Beispielsweise kann a?b mit /xyz/123/acb übereinstimmen, aber nicht mit /xyz/acb/123.
Die Bedeutung von Platzhaltern ist wie folgt: : Entspricht einer beliebigen Anzahl von Zeichen, außer /. ?: Entspricht einem einzelnen Zeichen, außer /.
**: Entspricht einer beliebigen Anzahl von Zeichen, einschließlich /. {}: Eine durch Kommas getrennte Liste ist zulässig, die eine „oder“-Beziehung (oder) angibt.
!: Wird am Anfang des Musters verwendet und gibt an, dass nur nicht übereinstimmende Fälle zurückgegeben werden.
Beispielsweise stimmt foo/.js mit Dateien im Verzeichnis foo überein, deren Namen mit .js enden, und foo//.js mit Dateien im Verzeichnis foo und allen seinen Unterverzeichnissen, deren Namen mit enden. js. Die Datei mit der Endung !.css bedeutet, dass alle Dateien mit einem anderen Suffix als „.css“ übereinstimmen.

Weitere Beispiele für die Verwendung von Platzhaltern zum Festlegen von Quellattributen:
(2)grunt.loadNpmTasks

Die grunt.loadNpmTasks-Methode lädt Moduldateien. (3)grunt.registerTask

Die grunt.registerTask-Methode definiert, wie eine bestimmte Aufgabe aufgerufen wird. Die Aufgabe „Standard“ bedeutet, dass, wenn keine Parameter angegeben werden und der Grunt-Befehl direkt eingegeben wird, zuerst „cssmin:minify“ und dann „cssmin:combine“ ausgeführt werden, d. h. die Komprimierung wird zuerst durchgeführt und dann zusammengeführt. Wenn Sie nur eine Komprimierung oder nur eine Zusammenführung durchführen, müssen Sie nach dem Grunt-Befehl „Modulname: Zielname“ angeben.
grunt-contrib-clean: Dateien löschen.
* grunt-contrib-compass: Verwenden Sie Compass, um Sass-Dateien zu kompilieren.
* grunt-contrib-concat: Dateien konsolidieren.
* grunt-contrib-copy: Dateien kopieren.
* grunt-contrib-cssmin: CSS-Dateien komprimieren und zusammenführen.
* grunt-contrib-imagemin: Bildkomprimierungsmodul.
* grunt-contrib-jshint: Überprüfen Sie die JavaScript-Syntax.
* grunt-contrib-uglify: JavaScript-Dateien komprimieren und zusammenführen.
* grunt-contrib-watch: Dateiänderungen überwachen und entsprechende Maßnahmen ergreifen.
Wenn das Präfix des Moduls grunt-contrib lautet, bedeutet dies, dass das Modul vom grunt-Entwicklungsteam verwaltet wird. Wenn das Präfix grunt ist (z. B. grunt-pakmanager), bedeutet dies, dass es von einem Dritten verwaltet wird Entwickler.

Wählen Sie unten einige Module aus, um zu sehen, wie ihre Konfigurationsparameter geschrieben werden, d. h. wie jedes Modul in der grunt.initConfig-Methode konfiguriert wird.

### grunt-contrib-jshint

jshint wird verwendet, um Syntaxfehler zu überprüfen, z. B. ob die Verwendung von Semikolons korrekt ist, ob Sie vergessen haben, Klammern zu schreiben usw. Der Konfigurationscode in der grunt.initConfig-Methode lautet wie folgt.
/.js'] },

Der obige Code gibt zunächst das -Prüfelement von jshint an. eqeqeq bedeutet, dass der Gleichheitsoperator durch einen strikten Gleichheitsoperator ersetzt werden sollte, und das Nachstellen bedeutet, dass am Ende der Zeile keine zusätzlichen Leerzeichen stehen dürfen. Geben Sie dann das Dateiattribut an und geben Sie an, dass das Prüfziel die Datei Gruntfile.js und die JavaScript-Dateien in allen Unterverzeichnissen des lib-Verzeichnisses ist.

### grunt-contrib-concat

concat wird zum Zusammenführen ähnlicher Dateien verwendet. Es kann nicht nur JavaScript-Dateien, sondern auch CSS-Dateien zusammenführen.
.js', dest: ‘js/‘ } },

上面代码中的options属性指定压缩后文件的文件头，以及sourceMap设置；target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。

copy: { main: { src: ‘src/<em>‘, dest: ‘dest/‘, }, },</em>

上面代码将src子目录（只包含它下面的第一层文件和子目录），拷贝到dest子目录下面（即dest/src目录）。如果要更准确控制拷贝行为，比如只拷贝文件、不拷贝目录、不保持目录结构，可以写成下面这样：

copy: { main: { expand: true, cwd: ‘src/‘, src: ‘*‘, dest: ‘dest/‘, flatten: true, filter: ‘isFile', }, },

grunt-contrib-watch

watch模块用来在后台运行，监听指定事件，然后自动运行指定的任务。

watch: { scripts: { files: ‘<strong>/*.js', tasks: ‘jshint', options: { livereload: true, }, }, css: { files: ‘</strong>/<em>.sass', tasks: [‘sass'], options: { livereload: true, }, }, },</em>

设置好上面的代码，打开另一个进程，运行grunt watch。此后，任何的js代码变动，文件保存后就会自动运行jshint任务；任何sass文件变动，文件保存后就会自动运行sass任务。

需要注意的是，这两个任务的options参数之中，都设置了livereload，表示任务运行结束后，自动在浏览器中重载（reload）。这需要在浏览器中安装livereload插件。安装后，livereload的默认端口为localhost:35729，但是也可以用livereload: 1337的形式重设端口（localhost:1337）。

### 其他模块

下面是另外一些有用的模块。

（1）grunt-contrib-clean

该模块用于删除文件或目录。

clean: { build: { src: [“path/to/dir/one”, “path/to/dir/two”] } }

（2）grunt-autoprefixer

该模块用于为CSS语句加上浏览器前缀。

autoprefixer: { build: { expand: true, cwd: ‘build', src: [ ‘**/.css' ], dest: ‘build' } },

（3）grunt-contrib-connect

该模块用于在本机运行一个Web Server。

connect: { server: { options: { port: 4000, base: ‘build', hostname: ‘<em>‘ } } }</em>

connect模块会随着grunt运行结束而结束，为了使它一直处于运行状态，可以把它放在watch模块之前运行。因为watch模块需要手动中止，所以connect模块也就会一直运行。

（4）grunt-htmlhint

该模块用于检查HTML语法。

htmlhint: { build: { options: { ‘tag-pair': true, ‘tagname-lowercase': true, ‘attr-lowercase': true, ‘attr-value-double-quotes': true, ‘spec-char-escape': true, ‘id-unique': true, ‘head-script-disabled': true, }, src: [‘index.html'] } }

上面代码用于检查index.html文件：HTML标记是否配对、标记名和属性名是否小写、属性值是否包括在双引号之中、特殊字符是否转义、HTML元素的id属性是否为唯一值、head部分是否没有script标记。

（5）grunt-contrib-sass模块

该模块用于将SASS文件转为CSS文件。

sass: { build: { options: { style: ‘compressed' }, files: { ‘build/css/master.css': ‘assets/sass/master.scss' } } }

上面代码指定输出文件为build/css/master.css，输入文件为assets/sass/master.scss。

（6）grunt-markdown

该模块用于将markdown文档转为HTML文档。

markdown: { all: { files: [ { expand: true, src: ‘.md', dest: ‘docs/html/‘, ext: ‘.html' } ], options: { template: ‘templates/index.html', } } },

上面代码指定将md后缀名的文件，转为docs/html/目录下的html文件。template属性指定转换时采用的模板，模板样式如下。

<!DOCTYPE html> <html> <head> <title>Document</title> </head> <body> <div id=”main” class=”container”> <%=content%> </div> </body> </html>

{src: ‘foo/th<em>.js'}grunt-contrib-uglify {src: ‘foo/{a,b}</em>.js'} {src: [‘foo/a<em>.js', ‘foo/b</em>.js']}

至于combine目标，就只有一个files参数，表示输出文件是css子目录下的out.min.css，输入文件则是css子目录下的part1.min.css和part2.min.css。

files参数的格式可以是一个对象，也可以是一个数组。

files: { ‘dest/b.js': [‘src/bb.js', ‘src/bbb.js'], ‘dest/b1.js': [‘src/bb1.js', ‘src/bbb1.js'], }, // or files: [ {src: [‘src/aa.js', ‘src/aaa.js'], dest: ‘dest/a.js'}, {src: [‘src/aa1.js', ‘src/aaa1.js'], dest: ‘dest/a1.js'}, ],

如果minify目标和combine目标的属性设置有重合的部分，可以另行定义一个与minify和combine平行的options属性。

 grunt.initConfig({ cssmin: { options: { /<em> … </em>/ }, minify: { /<em> … </em>/ }, combine: { /<em> … </em>/ } } });

grunt # 默认情况下，先压缩后合并 grunt cssmin:minify # 只压缩不合并 grunt css:combine # 只合并不压缩

如果不指明目标，只是指明模块，就表示将所有目标依次运行一遍。

grunt cssmin

## 常用模块设置

grunt的模块已经超过了2000个，且还在快速增加。下面是一些常用的模块（按字母排序）。

*

jshint: { options: { eqeqeq: true, trailing: true }, files: [‘Gruntfile.js', ‘lib/

• Frederic Hemberger, Ein Build-Tool für Front-End-Projekte
• Mária Jurčovičová, Aufbau einer JavaScript-Bibliothek mit Grunt.js
• Ben Briggs，Beschleunigen Sie Ihren Webentwicklungs-Workflow mit Grunt
• Bilder mit Grunt optimieren
• Swapnil Mishra, Aufgaben mit Grunt vereinfachen
• AJ ONeal, Wechsel zu GruntJS
• Grunt-Dokumentation, Aufgaben konfigurieren
• Landon Schropp, Mit Grunt ein fantastisches Build-Skript schreiben
• Mike Cunsolo, Get Up And Running With Grunt
• Matt Bailey, A Beginner's Guide to Using Grunt With Magento
  转自：http://javascript.ruanyifeng.com/tool/grunt.html

同时推荐：http://www.w3cplus.com/tools/writing-awesome-build-script-grunt.html

concat: { js: { src: [‘lib/module1.js', ‘lib/module2.js', ‘lib/plugin.js'], dest: ‘dist/script.js' } css: { src: [‘style/normalize.css', ‘style/base.css', ‘style/theme.css'], dest: ‘dist/screen.css' } },

js目标用于合并JavaScript文件，css目标用语合并CSS文件。两者的src属性指定需要合并的文件（input），dest属性指定输出的目标文件（output）。

### grunt-contrib-uglify

uglify模块用来压缩代码，减小文件体积。

uglify: { options: { banner: bannerContent, sourceMapRoot: ‘../‘, sourceMap: ‘distrib/‘+name+'.min.js.map', sourceMapUrl: name+'.min.js.map' }, target : { expand: true, cwd: ‘js/origin', src : ‘