Auch in der Frontend-Entwicklung haben sich einige Technologien und Tools durchgesetzt. Hierzu gehören Bower und Grunt. In Kombination bieten beide Tools einen großen Mehrwert für jeden Entwickler.
Bower
Bower ist ein Paket-Manager, welcher hauptsächlich für Frontend verwendet wird (Javascripte, CSS, etc.). Bower kann hier über den Note-Package-Manager (NPM) installiert werden. Alle Infos können natürlich auch auf der Bower Website nachgelesen werden. Mit folgendem Kommando kann Bower installiert werden.
npm install -g bower
Danach sollte, sofern alles korrekt funktioniert hat, der Befehl „bower“ zur Verfügung stehen. Wenn ihr den Befehl ohne Parameter eingebt bekommt ihr hier die Help-Ausgabe mit allen verfügbaren Parametern und Optionen.
Einer der wichtigsten Befehle ist hier install. Mit dem install Befehl können nun neue Pakete in einem Projekt installiert werden. Hier ein paar Beispiele wie man Pakete installieren kann.
# Registrierte Pakete
$ bower install jquery
# GitHub Kurzschreibweise
$ bower install jquery/jquery
# Git Repository
$ bower install git://github.com/user/package.git
# URL
$ bower install http://example.com/script.js
Während der Installation werden die Pakete im Ordner bower_components abgelegt und eine Datei bower.json erzeugt, sofern die noch nicht vorhanden ist. In dieser Datei befinden sich alle Module und Abhängigkeiten, sowie allgemeine Informationen.
Nachdem man sich nun alle benötigten Pakete in sein Projekt geladen hat kommt nun die Frage „wie binde ich das nun alles ein“. Klar man könnte nun hin gehen und alle JS-Dateien per Hand im HTML einbinden. Aber dies wäre ja langweilig. Hierfür nutzen wir Grunt und das Plugin „grunt-bower-concat„.
Grunt
Aber erstmal zu Grunt. Grunt ist ein Javascript Task-Runner. Mit diesem netten Tool ist es möglich sich eigene Tasks zu schreiben, welche verschiedene Aufgaben wie zum Beispiel Javascript-Minifying oder ähnliches übernehmen können. Ihr fragt euch gerade vielleicht noch „warum brauche ich nun noch ein Tool“. Ganz einfach. Mit Grunt kann man allgemeine Aufgaben sehr gut vereinfachen und somit seinen Code aufräumen und schlanker machen, bevor man diese online stellt.
Auch Grunt kann hier über npm installiert werden.
npm install -g grunt-cli
Danach sollte der Befehl „grunt“ zur Verfügung stehen.
Bei einem neuen Grunt-Projekt spielen hier 2 Dateien eine größere Rolle. Einmal die Datei Gruntfile.js und die package.json. Die Datei Gruntfile.js ist um Grunt zu konfigurieren, neue Plugins zu laden oder neue Tasks zu erstellen.
Die Datei package.json ist hier hauptsächlich für npm um neue Module zu installieren, welche von Grunt genutzt werden können. Ein Beispiel package.json sieht wie folgt aus:
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-bower-concat": "^0.4.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-nodeunit": "~0.4.1",
"grunt-contrib-uglify": "~0.5.0"
}
}
Die angegeben Module werden hier automatisch in den Ordner node_modules installiert und können dann von Grunt geladen werden und stehen zur bereit. Besonders interessant ist hier das Modul grunt-bower-concat, welches wir uns gleich noch genauer anschauen werden.
Grunt-Templates (Scaffolding)
Grunt-Init ist ein weitere Tool um aus bestehenden Templates ein Projekt zu erstellen. Ich möchte hier nun erstmal nicht weiter darauf eingehen, da wir dies hier erstmal per Hand machen. Wen dies interessiert der kann sich hier weitere Informationen holen.
Grunfile.js (Konfiguration)
Damit die Tasks von Grunt gefunden und ausgeführt werden müssen diese, wie schon erwähnt, in der Konfigurations-Datei angelegt und geladen werden. Hier zeige ich euch nun mal meine Datei, für ein kleines Projekt um dies ein wenig anhand des Beispiels zu erläutern.
module.exports = function(grunt) {
grunt.initConfig({
bower_concat: {
all: {
dest: 'build/js/bower.build.js',
cssDest: 'build/css/bower.build.css'
}
},
uglify: {
my_target: {
files: {
'build/js/bower.min.js': ['build/js/bower.build.js']
}
}
},
cssmin: {
target: {
files: [{
expand: true,
cwd: 'build/css',
src: ['*.css', '!*.min.css'],
dest: 'build/css',
ext: '.min.css'
}]
}
}
});
grunt.loadNpmTasks('grunt-bower-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['bower_concat', 'uglify', 'cssmin']);
};
Die Konfiguration teilt sich hier in die folgende Teile auf:
grunt.initConfig({});
grunt.loadNpmTasks('modulname');
grunt.registerTask('default', []);
Unter dem Bereich initConfig werden Optionen zu den einzelnen Modulen konfiguriert. Für „grunt-bower-concat“ wird hier beispielsweise angegeben wo die fertige Datei am Ende hin geschrieben werden soll (dest, cssDest).
Mit loadNpmTasks können die in der package.json angegeben Module geladen werden. Zuletzt müssen diese noch Registriert werden, damit Grunt die Pakete korrekt und in der richtigen Reihenfolge ausführt.
Das war es für den Anfang eigentlich schon.
Grunt-Bower-Concat
Dem einen oder anderen sollte ggf. schon klar sein was das Modul am Ende tut. Grunt-Bower-Concat schaut am Ende nach welche Pakete installiert sind und sucht sich hier die Javascript- und CSS-Dateien automatisch zusammen und packt diese zu EINER Datei zusammen. Dies ist sehr praktisch, da man dadurch sehr viele Requests einsparen kann und mit dem Minifying die Dateien auch direkt noch kleiner bekommt.
Ein kleiner Tipp am Rande: Man sollte hier ein bisschen aufpassen was man so installiert, da die fertige Datei „bower.min.js“ unter Umständen sehr groß werden kann. Hier sollte man auch regelmäßig aufräumen.
Als letztes werden hier noch die JS- und CSS-Dateien komprimiert um eine bessere Performance zu erhalten. Es gibt noch sehr viele andere Möglichkeiten wie man Grunt nutzen kann. Ich denke hier lohnt es sich einfach ein bisschen auf der Website rum zu schauen und sich ein bisschen inspirieren zu lassen.
Fazit
Ich persönlich finde Grunt und Bower sehr hilfreich, da beide Tools einem viel Arbeit abnehmen und man auch schnell „mal eben“ neue Libs ausprobieren und installieren kann.