Änderungen an CSS/JS in den Chrome Developer Tools live zum Server übertragen
Mein Workflow bei der Entwicklung einer Webseite sieht folgendermaßen aus:
Mit Transmit dem FTP-Client meiner Wahl verbinde ich mich auf den Server, öffne mit Textmate die CSS Datei, schreibe meine styling Anweisungen, speichere (Transmit nimmt anschließenden einen automatischen upload vor), wechsle in den guten Chrome, bestaune mein Werk, ändere wieder etwas am CSS, usw.
Wenn das Layout dann im groben ansehnlich ist, steht der Feinschliff an. Zum probieren was gut aussieht, seien es Abstände, Farbnuancen oder sonst irgendwas, hat der beschriebene Workflow so seine Schwierigkeiten, was Geschwindigkeit und Flexibilität angeht.
Deswegen behilft der pfiffige Webentwickler sich mit dem Style Editor der Chrome Developer Tools:
Modifikationen an dieser Stelle haben leider einen Nachteil: Nach dem Reload sind die Änderungen weg.
Mit der neusten Chrome Beta ist es allerdings möglich sich das modifizierte CSS zu speichern. (Chrome kümmert sich sogar um die Versionierung.)
Das ist toll, leider aber ziemlich umständlich.
Wäre es nicht schön, wenn Änderungen in den Chrome Developer Tools direkt an den Server gesendet würden?
Wie, sagen wir, in diesem Video:
Die Extension “Chrome Devtools Autosave” ermöglicht es bei lokalen Seiten (z.B. file://localhost/project/test.html) Änderungen am CSS oder JavaScript automatisch zu übernehmen. Das modifizierte CSS (oder JS) schickt die Extension an einen lokal laufenden Node.js Server, der sich um das überschreiben der Ursprungsdatei kümmert.
Installation der Extension (Experimental Extension APIs aktivieren nicht vergessen) und starten des Node.js Servers sollte mit Hilfe der Anleitung auf github kein Problem darstellen.
Sollen die Änderungen aber direkt an den Server übertragen werden, bedarf es noch einiger weniger Kniffe:
1. Mounten des FTP-Servers als Laufwerk.
Das geht beispielsweise mit Transmit (siehe Video).
2. Eintragen der Domain in die Extension
Hierzu geht man in die Extension Optionen und fügt eine neue Resource hinzu:
3. Modifizieren des Node.js Servers.
Die Zeilen 3 bis 8 der gerade aktuellen Version des Node.js Servers lauten:
var routes = [
{
from: /^file:\/\/(?:localhost)?\//,
to: '/'
}
];
Die Zeile mit ‘from’ ändert ihr in: from: /http:\/\/stereonom.de\//,
Die Zeile mit ‘to’ in: to: '/Volumes\/stereonom.de/' (das sollte dem Pfad zu dem gemounteten FTP-Server entsprechen).
Der Entwickler hat diesen Umstand erkannt und verspricht Besserung.
Startet man nun den Node.js Server kann man munter drauf los editieren.
Nicht vergessen: Vorher ein Backup machen!
