In diesem Beitrag wird ein Ansatz anhand eines ausbaubaren Beispiels vorgestellt, wie man mit Grunt und Firefox Automatisierungsaufgaben für eingefleischte Mausschubser ausführbar machen kann. Wir entwickeln eine einfache GUI für ein Grunt-Skript und zwar als Firefox-Add-on.
Installation des Add-on-SDK von Mozilla für den Firefox
Dafür benötigen wir zunächst Phyton auf unserem Rechner und das Add-on-SDK von Mozilla. Für eine erfolgreiche Installation sind folgende Schritte notwendig:
- Phyton 2.x installieren, z.B. mit dem Pyhton 2.7.8 Windows X86-64 Installer am besten in ein Verzeichnis unterhalb von C:\\, z.B. in das Verzeichnis C:\Python27.
- Add-onSDK downloaden. Ich verwende die aktuelle Version 1.17. Ich installiere das SDK in einem Ordner C:\develop.
- Im Bash-Skript C:\Develop\addon-sdk-1.17\bin\activate.bat alle Zeilen entfernen, in denen irgendwelche Phyton-Versionen abgefragt werden und nur durch Folgendes ersetzen: SET PYTHONINSTALL=C:\Python27 .
- In C:\Develop\addon-sdk-1.17 Folgendes in der Konsole ausführen: bin\activate.
- Jetzt sehe ich den Prompt des SDK und einen Hinweis, wo ich die aktuellste Dokumentation finde.
- Das cfx-Kommando ausführen (einfach cfx in die Console eingeben). Dort erscheint dann eine Liste mit allen Befehlen. Dies ist das Hauptinterface zum SDK.
Erste Schritte
Als erstes legt man irgendwo im SDK einen Projektordner an, z.B. myapps\my-addon. Dort gibt man folgendes über die Console ein
- cfx init
Es werden verschiedene Dateien und Ordner automatisch generiert (vgl. Abb. 1).
Abb. 1: Mit "cfx init" generierte Dateistruktur
Im lib-Ordner finden wir die Datei main.js. Dort geben wir unser Javascript ein, das zunächst folgendermaßen aussieht:
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("https://developer.mozilla.org/");
}Auch ohne, dass man sich jetzt mit dem SDK auskennt, ahnt man, dass dort ein Button erzeugt wird (in der Firefox-Menuleiste), mit dem man die Seite developer.mozilla.org im Firefox mit einem Klick in einem neuen Tabulator öffnen kann.
Die drei Versionen unseres Button-Icons müssen wir übrigens irgendwie kreieren oder downloaden und dann in dem Ordner data in unserem Projekt mit den im Skript vorgegebenen Namen ablegen.
Wir probieren unsere minimale App aus, indem wir in die Konsole eingeben:
- C:\Develop\addon-sdk-1.17\bin\activate.bat (Damit starten wir das SDK)
- cfx run -o (oder nur cfx run, das -o soll immer dann verwendet werden, wenn man die App selbst entwickelt)
Es erscheint eine FF-Instanz, in der wir oben-rechts unseren Button in der FF-Menuleiste finden. Wenn wir den betätigen, wird hoffentlich die Mozilla-Seite im FF geladen.
Wenn die App fertig ist, dann führen wir folgendes Kommando aus, um ein xpi-File zu erzeugen:
- cfx xpi
Die App als xpi-File kann dann im normalen FF per Datei öffnen installiert werden.
Falls man den Browser nicht immer restarten möchte, kann man die Extension Auto-Installer installieren. Die beobachtet neue xpi-files und installiert sie automatisch. So kann man Änderungen testen, ohne den Browser neu zu starten.
Starten einer Grunt-Task per Firefox-Addon
Nun kommen wir zum eigentlich Punkt dieses Beitrags. Wir wollen mit dem simplen Button in unserer FF-Menuleiste eine Grunt-Task starten.
Hierzu benutzen wir die experimentelle Implementierung von child_process (aus Node.js) für Firefox. Wir ändern unser Skript oben folgendermaßen:
var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");
var button = buttons.ActionButton({
id: "mozilla-link",
label: "Visit Mozilla",
icon: {
"16": "./icon-16.png",
"32": "./icon-32.png",
"64": "./icon-64.png"
},
onClick: handleClick
});
function handleClick(state) {
tabs.open("https://developer.mozilla.org/");
// https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/system_child_process
var child_process = require("sdk/system/child_process");
// das funktioniert auch, ist aber hier auskommentiert:
/*
var ls = child_process.spawn(
'C:\\Program Files (x86)\\Git\\bin\\ls.exe', // command
[ // args
'-lh', 'C:\\Work'
],
{'cwd': 'C:\\xampp\\htdocs\\GruntSimple'} // options
);*/
var ls = child_process.spawn(
'C:\\Program Files\\nodejs\\node.exe', // command
[ // args
'c:\\Users\\admin\\AppData\\Roaming\\npm\\node_modules\\grunt-cli\\bin\\grunt',
'test'
],
{'cwd': 'C:\\xampp\\htdocs\\GruntSimple'} // options
);
ls.stdout.on('data', function (data) {
console.log('stdout: ' + data);
});
ls.stderr.on('data', function (data) {
console.log('stderr: ' + data);
});
ls.on('close', function (code) {
console.log('child process exited with code ' + code);
});
}Wenn wir unser Grunt-Skript direkt mit Hilfe von Node.js starten (ähnlich wie in unserem Debugger-Beitrag), dann läuft es, sofern wir alle Pfade vollständig angeben.
Glücklicherweise funktioniert auch unsere Option current working directory (cwd), so dass wir immer bestimmten können, in welchem Verzeichnis grunt ausgeführt werden soll.
Setzen Sie die Pfade auf eines unserer bisherigen Gruntskripte, starten Sie das Addon mit cfx run oder erzeugen Sie ein xpi-File, um die App dauerhaft im Firefox verfügbar zu haben.
Damit steht jetzt eine ausbaufähige Möglichkeit zur Verfügung, ein Graphical User Interface (GUI) für Grunt-Skripte zu bauen.