Grunt-Einführung
Grunt ist ein Konstruktionstool, das auf js und node.js basiert. Da node.js in dieser Zeit immer beliebter wurde, verfügt grunt über umfangreiche Open-Source-Community-Unterstützung und hat viele Plug-Ins erstellt . Es gibt auch einige Plugins, die in der Node-Community verstreut sind. Konstruktion ist ein weit gefasster Begriff. Da die Technologie immer häufiger vorkommt, umfasst die Konstruktion auch die Vorverarbeitung von Front-End-Komponenten, z. B. die Vorverarbeitung von Sass und weniger in CSS , und js. Komprimierung und Zusammenführung. Das Grunt-Plug-in kann diese neuen Gebäudekonzepte sehr gut unterstützen und eignet sich besser für Projekte, die mit Open-Source-Technologien erstellt wurden. Obwohl Grunt eher für die Programmerstellung verwendet wird, ist Grunt im Wesentlichen ein Tool zum Ausführen von Aufgaben, das zur Lösung sich wiederholender Aufgaben verwendet wird.
Erste Schritte mit Grunt
Installieren
Laden Sie Node.js herunter und installieren Sie es. Adresse herunterladen
Installation überprüfen und Version anzeigen:
node -v
v0.10.25
Installieren Sie das grunt-Befehlszeilentool grunt-cli und installieren Sie es mit -g global, sodass es in jedem Verzeichnis verwendet werden kann. Der folgende Befehl fügt grunt zu Ihrem Systemsuchpfad hinzu, sodass Sie diesen Befehl in jedem Verzeichnis verwenden können.
npm install -g grunt-cli
Es ist zu beachten, dass unter Linux oder Mac manchmal der Fehler „keine Berechtigungen“ gemeldet wird. In diesem Fall muss ein sudo vorangestellt werden
sudo npm install grunt-cli -g
Version anzeigen:
grunt –version
grunt-cli v0.1.13
Deinstallieren. Wenn Sie Grunt zuvor global installiert haben, entfernen Sie es zuerst.
npm uninstall -g grunt
grunt-cli ist nur eine Grunt-Befehlszeilenschnittstelle, die die Verwendung von Grunt und seinen Plug-Ins erfordert. Das Grunt-Modul selbst muss im Projektpfad (normalerweise im Projektstammverzeichnis) installiert werden, wofür das Plug-In erforderlich ist. im Modul. Immer wenn der Befehl grunt ausgeführt wird, sucht er über den Befehl nodejs require lokal nach dem installierten Grunt. Aus diesem Grund können Sie Grunt-Befehle in jedem Unterverzeichnis ausführen. Wenn die CLI ein lokal installiertes Grunt findet, lädt sie die Grunt-Bibliothek, wendet die von Ihnen in GruntFile geschriebene Konfiguration an und führt dann die entsprechenden Aufgaben aus.
Konfigurationsdatei
package.json
package.json wird verwendet, um die installierten und erforderlichen Knotenmodule im aktuellen Verzeichnis zu speichern, zum Beispiel:
{ "name": "my-project-name", "version": "0.1.0", "author": "Your Name", "devDependencies": { "grunt": "~0.4.1" } }
Sie können diese Datei manuell oder über den Befehl npm init erstellen und den Anweisungen folgen, um die Erstellung der Datei package.json abzuschließen. Wenn Sie package.json manuell erstellt haben, laden Sie einfach die erforderlichen Module über npm install herunter und installieren Sie sie. Wenn das Modul installiert ist, wird es im Verzeichnis node_modules gespeichert.
Wenn Sie die erforderlichen Module später hinzufügen möchten, verwenden Sie den folgenden Befehl, um die Datei package.json synchron zu aktualisieren
npm install <module> --save-dev
Gruntfile.js
Der Status dieser Datei ist wie bei einem Makefile. Es handelt sich um eine Datei, die Grunzen zum Ausführen von Aufgaben anleitet. Sie muss die für jedes Plug-In-Modul erforderlichen Parameter konfigurieren, Plug-Ins laden und Aufgaben definieren. Weitere Informationen zu Gruntfile finden Sie hier. Es wird empfohlen, dass die Leser ein umfassendes Verständnis von Gruntfile haben, bevor sie fortfahren.
ASP.NET MVC mit Grunt erstellen
MSbuild
Bevor Sie Grunt zum Erstellen von .NET-Projekten verwenden, müssen Sie zunächst MSbuild verstehen. MSBuild ist Microsofts Tool zum Erstellen von Programmen. Derzeit wird MSbuild vollständig zum Kompilieren von Projekten verwendet. MSbuild besteht aus einem msbuild-Tool, einer Reihe von Compiler- oder Builder-Programmen und XML-Dateien. Tatsächlich handelt es sich bei den Projektdateien .sln und .csproj in Visual Studio um XML, die von msbuild erkannt werden können (im Folgenden als msbuild-Konfigurationsdatei bezeichnet). Visual Studio schließt die Build-Arbeit durch Aufrufen von msbuild ab, und msbuild erkennt die Parameter und Build-Verhaltenskennungen . Wir können msbuild auch selbst über die Befehlszeile aufrufen.
Es gibt zwei Schlüsselkonzepte in msbuild: Aufgabe und Eigenschaft. Die Aufgabe ist der Einstiegspunkt für die direkte Ausführung von msbuild als Ziel. Wenn msbuild ausgeführt wird, muss es auf die Standardaufgabe verweisen, andernfalls muss angegeben werden, was die Zielaufgabe ist. Eine Eigenschaft ist eine Variable. Genauso wie Variablen in einem Programm die Programmausführung beeinflussen können, kann eine Eigenschaft das Verhalten des Builds beeinflussen.
Die von VisualStudio generierte msbuild-Konfigurationsdatei ist oberflächlich betrachtet nur wenige Uplinks. Durch den Import werden jedoch einige vordefinierte Konfigurationsdateien importiert, sodass die vollständige Konfiguration nicht angezeigt werden kann Datei. Suchen Sie das Schlüsselaufgabenelement. Glücklicherweise gibt es ein Tool, mit dem Sie die Struktur der msbuild-Konfigurationsdatei analysieren können.
Darüber hinaus können Sie beim Aufruf von msbuild die Standardeigenschaften und -aufgaben über Befehlszeilenparameter überschreiben. Der folgende Aufruf gibt beispielsweise an, dass die Aufgabe „Neu erstellen“ als Ziel verwendet wird und das Konfigurationsattribut auf Debug gesetzt ist:
msbuild ConsoleApplication1.csproj /target:Rebuild /property:Configuration=Debug
更多关于msbuild,请参考微软的文档
手动使用msbuild代替VisualStudio
以发布到本机为例,经过笔者在VS2012下的环境中测试,使用VS在调用msbuild时使用了如下关键的参数覆盖:
关键的任务:
至此,我们已经可以使用msbuild命令行来代替VS的一些构建动作了。由于本篇的重点是grunt,读者可以参见微软的说明,自己试验一下:
PS: MSbuild通常位于类似这样的目录下:C:\Windows\Microsoft.NET\Framework64\v4.0.30319\MSBuild.exe
使用grunt-msbuild调用msbuild
终于到了介绍本文的主角了:grunt-msbuild。这是一个个人开发的msbuild调用中间件。作为grunt的插件,经过笔者亲测,完全可以使用。结合其他的grunt插件,简化了笔者发布项目的过程。
你可以像下面这样将这个插件添加进项目的Gruntfile,实现自动发布:
msbuild: { fontend: { src: ['Web.FontEnd/Web.FontEnd.csproj'], options: { projectConfiguration: 'Release', targets: ['WebPublish'], stdout: true, maxCpuCount: 4, buildParameters: { WarningLevel: 2, VisualStudioVersion: "11.0", DeleteExistingFiles: 'True', WebPublishMethod: 'FileSystem', publishUrl: [font_pwd] }, verbosity: 'quiet' } } }
上面的代码实现了,将Web.FontEnd.csproj项目在Release模式下通过FileSystem发布方式发布到font_pwd变量指代的目录下。 这里需要注意的是,可能需要根据自己的VS版本修改VisualStudioVersion参数,可以通过查看类似如下目录:C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0来检查。font_pwd是一个js变量,根据需要进行调整。
Grunt的完整配置就不给出了,主要是要知道这几个关键的参数设置。
在实际使用过程中DeleteExistingFiles这个参数似乎不起作用,所以可能需要另外再包含清空目标文件夹的任务。下面是实际任务运行时的部分截图: