deving.de

Hello World!
Grunt

Coding, Javascript, , , ,

Grunt: Installation & Einstieg

The JavaScript Task Runner How To

Grunt ist ein Task Runner mit dem automatisiert verschiedenste Aufgaben erledigt werden können. Grunt ist sehr nützlich bei der täglichen Arbeit als Webworker/Webentwickler.  Neben dem eigentlichen Programm besteht Grunt noch aus dem Kommando Zeilen Tool grunt-cli. Für Grunt gibt es tausende von Plugins, wobei es für viele Aufgaben unterschiedlichste Ausführungen gibt. Einige der Plugins werden durch die Entwickler von Grunt selbst zur Verfügung gestellt, die sogenannten „Contrib“ Plugins. Diese Plugins sind mit einem Stern markiert und beinhalten das Wort „contrib“. Die meisten Plugins werden aber von der inzwischen sehr großen Grunt-Community entwickelt und sind über den Node Package Manager (npm) verfügbar.

Hier erfährst du, wie man Grunt installiert, einrichtet und in Projekten einsetzen kann. Als Beispiel richten wir einen Grunt Task für die Minimierung und Kombinierung von CSS und JavaScript Dateien ein.

Wieso Grunt benutzen?

Es gibt viele Gründe warum man Grunt benutzen sollte, aber der wohl wichtigste ist die Automatisierung. Grunt erleichtert dir deine Arbeit. Es übernimmt für dich viele Routine Aufgaben wie z.B. die Verkleinerung (Minify) & Kombination (Combine) von CSS und JavaScript Dateien, verschiedene Tests, Bildverkleinerung und vieles mehr.

Grunt Installation

1. Zu allererst benötigst du node.js das du hier downloaden kannst. Nach der Installation von node.js steht das Kommando npm zur Verfügung.

Node.js ist eine serverseitige Plattform zum Betrieb von Netzwerkanwendungen. Insbesondere lassen sich Webserver damit realisieren. Node.js basiert auf der JavaScript-Laufzeitumgebung „V8“, die ursprünglich für Google Chrome entwickelt wurde, und bietet daher eine ressourcensparende Architektur, die eine besonders große Anzahl gleichzeitig bestehender Netzwerkverbindungen ermöglicht.

Quelle: http://de.wikipedia.org/wiki/Node.js

2. Nun öffnest du die Windows Eingabeaufforderung oder die Linux Console/Terminal und navigierst zu deinem Projekt Ordner. Falls du die Windows Eingabeaufforderung direkt in einem Projekt Ordner starten willst, öffne den Ordner im Windows Explorer, nun tippe oben in die Adresszeile „cmd“ und klicke die Taste Enter. Nun öffnet sich die Windows Eingabeaufforderung direkt in dem Ordner.

3. Tippe folgendes Kommando ein um grund-cli (Grunt Command Line Interface) zu installieren:

npm install -g grunt-cli

npm steht für Node Package Manager, der Packetmanager in dem alle node.js Module gehostet werden. Die Option -g bewirkt das dieses Modul global installiert wird. Also von jedem Systempfad aus erreichbar ist.

4. Navigiere nun zu deinem Projekt Ordner und erstelle die Datei „package.json“ mit folgendem Inhalt:

{
	"name": "projekt",
	"version": "0.1.0"
}

5. Tippe nun folgendes Kommando ein um Grunt in dieses Projekt zu integrieren:

npm install grunt --save-dev

Die Option --save-dev bewirkt das Grunt als Abhängigkeit für dieses Projekt automatisch in die vorher angelegte „package.json“ Datei eingetragen wird. Es wurde zusätzlich der Ordner „node_modules“ angelegt in dem sich Grunt nun befindet. Falls du mit Git arbeitest solltest du diesen Ordner in die gitignore (Ignorier Liste von Git) eintragen um unnötigen Balast zu vermeiden.

Grunt Plugins installieren

Nun ist euer Projekt  mit Grunt ausgestattet. Jetzt wollen wir ein paar Grunt Plugins installieren die du unter http://gruntjs.com/plugins findest. Die Plugins die „contrib“ beinhalten und mit einen Stern markiert sind wurden direkt vom Grunt Team entwickelt.

Mit folgendem Kommando installierst du Grunt Plugins ins Projekt: Hier die Plugins grunt-contrib-clean, grunt-contrib-concat, grunt-contrib-copy, grunt-contrib-cssmin, grunt-contrib-jshint, grunt-contrib-uglify und grunt-contrib-watch

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

In der „package.json“ Datei werden die Plugins automatisch als Abhängigkeit eingetragen und im „node_modules“ Ordner wird das Plugin eingefügt.

Grunt Tasks in der gruntfile.js erstellen

Jetzt kannst du die Datei „gruntfile.js“ im Hauptordner des Projekts erstellen. Es müsste nun die Datei „package.json“, „gruntfile.js“ und der Ordner „node_modules“ in deinem Projekt Ordner enthalten sein.

Wir legen nun einen Test Task an der unsere CSS und JavaScript Dateien zusammenfügen und minimieren soll.

Alle sources sind unter ./src und werden dann durch den Grunt Task nach ./dest generiert.

src
├── css
   ├── 1.css
   ├── 2.css
   └── 3.css
└── js
    ├── 1.js
    ├── 2.js
    └── 3.js

Öffne die gruntfile.js und füge folgenden Inhalt ein:

module.exports = function(grunt)
{
	//Project configuration
	grunt.initConfig(
	{
		pkg : grunt.file.readJSON('package.json'),
		concat :
		{
			css :
			{
				options :
				{
					banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
				},
				src : 'src/css/*.css',
				dest : 'dest/css/style.css',
			},
			js :
			{
				options :
				{
					banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
				},
				src : 'src/js/*.js',
				dest : 'dest/js/jscript.js',
			},
		},
		cssmin :
		{
			css :
			{
				options :
				{
					banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
				},
				src : 'dest/css/style.css',
				dest : 'dest/css/style.min.css',
			}
		},
		uglify :
		{
			options :
			{
				banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
			},
			build :
			{
				src : 'dest/js/jscript.js',
				dest : 'dest/js/jscript.min.js'
			}
		}
	});

	//Load plugins
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-cssmin');

	//Default task(s)
	grunt.registerTask('default', ['concat', 'cssmin', 'uglify']);
}

Nun ist die gruntfile.js erstellt.

Erläuterungen zur erstellten gruntfile.js:

  • concat: Liste der Dateien die zusammengeführt werden sollen
  • <%= pkg.name %>: Paketname, in diesem Fall „projekt“
  • ’src/css/*.css‘: Alle Files mit der Endung „.css“ im Ordner „src/css/“
  • src: Quelle
  • dest: Ziel
  • grunt.loadNpmTasks: Laden der benötigten Plugins
  • grunt.registerTask: Festlegen was beim Aufruf von grunt geschehen soll

Grunt Ausführen

Jetzt kannst du im Projekt Ordner grunt aufrufen und es sollte folgendes Ergebnis erstellt werden.

dest
├── css
   ├── style.css
   ├── style.min.css
└── js
    ├── jscript.js
    ├── jscript.min.js
  • die zusammengefügte Datei
  • die zusammengefügte und minimierte Datei

Abschluss

Grunt ist ein sehr mächtiges Werkzeug das bei vielen Aufgaben helfen kann. Arbeitet man sich einmal in Grunt ein, will man es nie mehr missen.

Ich hoffe ich konnte euch einen kleinen Einblick in Grunt verschaffen und den Einstieg erleichten :)

The following two tabs change content below.
Theodoros
Hello World! Begeisterter Webentwickler & SEO :)
Neueste Artikel von Theodoros (alle ansehen)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*