BLOG | KaiBrockelt

Beitrag vom 5. April 2016

Webdesign und Programmierung kann man natürlich komplett über grafische Desktop-Programme lösen. Es gibt allerdings viele Baustellen, an denen Prozesse oft unnötig manuell ablaufen oder über viel zu viele Fenster gelöst werden. Richtig effizient wirst du erst, wenn du dich mit der Shell anfreundest und die Magie der Command Line nutzt. Ich präsentiere dir hier deshalb meine Top 7 der CLI Tools für Webdesigner, die dir das Leben erleichtern, sobald du sie beherrscht:

 

1 SSH/SCP

Die Secure Shell ist der Klassiker, ohne den fast garnichts geht. Verbinde dich via SSH auf die Console deines Webservers und arbeite dort „lokal“. Nutze das ganze Arsenal, was ein Unix System dir zu bieten hat: Starte Webserver, räume Verzeichnisse auf, dumpe die Datenbank. Durch die Nutzung von hinterlegbaren Schlüsseln brauchst du dir keine Passwörter mehr zu merken oder notieren. Via Config-File kannst du dir Shortcuts in all deine Systeme legen. Statt ssh webuser@website-des-kunden.de zu tippen reicht ein ssh kunde und du bist drin.

SSH erlaubt es dir außerdem, Tunnel aufzubauen und Ports an eine Zielmaschine zu binden. So kannst du zum Beispiel eine Verbindung zu einem geschützten SQL Server aufbauen und mit deinen lokalen Tools arbeiten. Oder leite deinen Browser-Traffic über den Webserver und nutze ihn somit als Proxy.

Via SCP kannst du Dateien direkt zwischen Systemen kopieren. Entwicklungsserver und Live-System sind nicht die gleiche Maschine? Statt Daten mühselig via FTP Client erst herunter zu laden, um sie dann auf den nächsten Server wieder hoch zu laden, kannst du mit einem Einzeiler direkt zwischen Systemen hin und her kopieren. 

scp -r ~/Website/dev/ kundenserver:~/Website/live

 

Die meisten Unix Dateimanager unterstützen außerdem SSH. Du kannst ein entferntes Verzeichnis einfach mounten und mit deinen Lieblings-Tools Dateien bearbeiten, als wären sie lokal verfügbar. Macht das erstmal nach, FileZilla & Cyberduck! 🙂

 

2 Screen

Du möchtest auf einem System einen Prozess starten, der etwas länger dauert (z.B. einen dicken Dump einspielen), hast aber keine Lust darauf zu warten, bis die Aufgabe erledigt ist? Sende deine Befehle in eine Screen Sitzung! Screen ist quasi ein virtuelles Terminal im Terminal.

Du kannst beliebig viele Screens erstellen, verbinden und in den Hintergrund schicken. Die Sitzung darin bleibt erhalten –  Programme und Scripte laufen weiter. Selbst wenn die SSH Verbindung abschmieren sollte oder du dich abmeldest: Im Screen rödelt alles brav weiter vor sich hin. Der Screen hält dicht und macht das, was du ihm an Kommandos gegeben hast. 

Via screen -ls listest du vorhandene Sitzungen auf. Mit screen startest du eine namenlose Sitzung und mit screen -S <Sitzungsname> startest du eine Sitzung mit Namen. screen -r <ID oder Sitzungsname> nimmt die Verbindung zu einem vorhandenen Screen auf. Möchtest du die Verbindung zum aktuellen Screen trennen, drücke erst STRG+A und dann D. Um eine Sitzung zu schließen, tippe einfach exit oder quit in deine Screen-Sitzung.

 

3 Rsync

Rsync ist ein Tool, um Dateien und Verzeichnisse zwischen Rechnern zu synchronisieren. Die Stärke des Tools ist seine effiziente Arbeitsweise. Statt ein ganzes Verzeichnis zu kopieren schaut Rsync, was sich geändert hat. Dabei blickt Rsync sogar in die Dateien hinein und überträgt nur Datei-Unterschiede, ähnlich wie bei einem Diff-Merge oder git commit. Um dir kostbare Bandbreite zu sparen, bringt rsync auch eine Dateikomprimierung mit. Rsync ist also ein richtiger Bandbreitensparfuchs!

Das Rsync-Protokoll arbeitet von Haus aus nicht verschlüsselt, kann aber ganz einfach via SSH tunneln.

Befehle mit Rsync sind genauso simpel aufgebaut wie CP oder SCP:

rsync -av -e ssh /mein/quell/verzeichnis webserver:/mein/ziel/verzeichnis
oder in deutsch:
rsync -archivieren -gesprächig -"nehme ssh" /quelle /ziel

 

Es gibt einen Haufen an Parametern, die dir erlauben, genau zu bestimmen wie was synchronisiert wird. Am besten schaust du einfach in die man-pages mit man rsync.

Es gehen übrigens Gerüchte um, dass manche Menschen auch ein Backup à la TimeMachine mit Rsync bauen können. Dazu vielleicht bald mehr in einem eigenen Artikel.

 

4 Bower

Sind wir mal ehrlich – Es ist doch bei jedem Projekt das Selbe: Du brauchst vermutlich Bootstrap oder Foundation, möchtest jQuery nutzen, vielleicht noch jQuery UI. Wie wär’s denn mit einem Reset-Stylesheet? Entweder bist du jemand, der immer aufs neue die ganzen Websites ansteuert und die aktuellen Versionen in dein Projekt lädt. Oder du hältst dir ein Boilerplate mit deinen wichtigsten Bibliotheken vor… Oh es gibt Updates? Schnell mal wieder 10 Seiten ansurfen und die aktuellsten Versionen ziehen.

Oder du nutzt Bower. Bower ist ein Paketmanager für Webprojekte. Ja,.. du hast richtig gehört. Mit Bower kannst du ähnlich wie mit apt-get Pakete installieren. Egal ob ein beliebtes Framework, CSS Styles oder Javascript Bibliotheken. Mit bower install <Paketname> wird die aktuelle Version in dein Verzeichnis geladen. Du kannst dabei registrierte Paketnamen, GitHub shorthand Codes, Git-URLs oder HTTP-Urls verwenden.  Du möchtest ein Paket updaten? bower update <Paketname> does the trick!

Häufig verwendete Bibliotheken kannst du in ein Paket zusammenschnüren und auf Github hosten und von dort aus erneut installieren. Bower selbst installierst du am besten VIA npm: 

sudo npm install -g bower

 

5 Grunt.js / Gulp.js

Grunt und Gulp sind Build-Tools für deine Web-Dateien. Wer sich ein wenig mit Website-Performance auskennt, weiß, dass es nicht nur zum guten Ton gehört, so wenig Anfragen wie möglich an den Webserver zu senden. Deine Besucher werden es dir danken, wenn die Seite rennt. Und spätestens seitdem wir wissen, dass Google auch die Ladegeschwindigkeit deiner Website als Ranking-Faktor mit einbezieht, solltest du dir im klaren sein, dass Performance einfach nur Sau wichtig ist. 

Während der Entwicklung hast du wahrscheinlich wie die Meisten deine JS und CSS Files in mehreren Dateien vorliegen: Hier Jquery, da eine Bibiliothek für Slideshows und anderen Bling Bling. Ein Reset Stylesheet, ein Grid-Framework… und darüber hinaus noch deinen eigenen Code. So kommen schnell mal 20 Files zusammen, die du alle einzeln eingebettet hast. Besser ist es natürlich, nur eine JS und eine CSS Datei einzubetten. Also fasse bitteschön deine Scripts und Styles in einer bestimmten Reihenfolge in eine Datei zusammen. Das per Hand zu machen ist mehr als lästig. Besonders, wenn du noch mal schnell eine Änderung nachziehen willst, fängt der Spaß von vorne an. 

Doch halte ein: dafür gibt es ja Build Tools!

Auch wenn beide Tools eigentlich wesentlich mehr auf dem Kasten haben: Die wohl meist genutzte Aufgabe ist es, Dateien zusammen zu fassen und zu komprimieren. Es gibt für beide unzählige plugins wie jslint, uglify, Sass/Scss oder less,..  und du kannst dir deine Workflows nach Geschmack automatisieren:

Nehme deine SCSS Files und übersetzte sie in CSS. Dann nimm alle CSS Files und packe sie in eine Datei. Das Ganze wird noch durch einen uglifyer gejagt, um Platz zu sparen. Speichere das Ergebnis unter dem Namen „styles.min.css“. 

Mit grunt watch bzw. gulp watch kannst du die Tools auch auf Veränderungen lauschen lassen und beim speichern von Dateien dazu bewegen, den Workflow zu starten. Oh nein,.. das blockiert dir deine Console für weitere Aufgaben? Nutze hierfür doch einfach eine Screen Sitzung 🙂

6 „up N“ Script

Das Up N Script ist so gesehen kein „Tool“. Aber es ist dennoch eine lohnenswerte Bereicherung, die dir bei der Verzeichnisnavigation auf der Shell deine Nerven schont:

Stell dir vor, du bist irgendwo auf deinem Projektverzeichnis unterwegs.. sagen wir in ~/webroot/kunde1/Projekt/htdocs/public/assets/js/lib/vendor/zeptojs/ und möchtest vier Verzeichnisse nach oben in ~/webroot/kunde1/Projekt/htdocs/public/assets/ wechseln. Entweder tippst du den Pfad erneut ein oder du cd’st dich mit cd ../../../.. von unten nach oben. Beides ist eine Menge Tipparbeit und gerade die vielen PunktPunkt-Slashs lassen sich echt nicht bequem tippen. 

Licht am Ende des Tunnels habe ich auf einer Seite im Ubuntu Wiki gefunden. Die UP N Funktion ist eine kleine Bash Funktion, die du dir in deine lokale oder globale Bashrc Datei einfügst. Sie hilft dir dabei, Verzeichnisse bequem nach oben zu wechseln: Du möchtest 3 Verzeichnisse nach oben? Tippe up 3 in deine Console und voilà: Da sind wir! Füge das Script am besten gleich direkt in deine Bashrc ein. Du wirst es lieben!

function up {
    [ "${1/[^0-9]/}" == "$1" ] && {
     local ups=""
     for i in $(seq 1 $1)
         do
         ups=$ups"../"
         done
     cd $ups
    } || echo "usage: up INTEGER"
}

7 theFUCK

Böser Name, gutes Programm. 

Wer kennt das nicht? Man möchte beispielsweise via apt-get install ein Paket installieren und vergisst dabei das sudo. Oder man vertippt sich. Der erste Gedanke, den man dann so hat: „Fuck!“ Anschließend drückt man fleißig das Pfeilchen nach oben, korrigiert seinen Befehl und versucht das ganze noch mal.

Und hier kommt theFUCK ins Spiel: 

 

theFUCK nimmt die letzte Befehlseingabe, analysiert sie anhand eines Regelwerkes und bietet darauf Vorschläge zur Korrektur an. Alles was du tun musst, ist nach einem misslungenen Befehl fuck schreiben. 

… Ist das nicht fucking nice? 🙂

 

BONUS: Shell-Scripte

Das ist jetzt so gesehen kein Tool, aber genau deshalb gehört es nicht zu den Top 7 😉

Wie du weist, kannst du alles, was du auf der Shell arbeitest, auch in ein Script packen. Ich empfehle dir, das auch zu tun. Wo fängst du da am besten an? Überlege dir, was du am häufigsten tippst oder tust. Wie wär’s denn mit ein paar kleinen Denkanstößen?

Depoloyment: eine Datenbank Dumpen, Dateien synchronisieren und dann die Datenbank wieder irgendwo einspielen? Schreib ein Script dazu! Statt den ganzen Kladderadatsch ständig auf’s neue zu tippen, speichere die Befehle einmalig in einer .sh Datei und rufe sie einfach mit ./deploy.sh auf. Fertig!

Backups: Das selbe Spiel in grün. Befehle sammeln, Script schreiben. Genug Zeit für eine extra Kaffeepause haben!

Bibliotheken updaten: hole Dies, hole Jenes, speichere hier, speichere da.

Apache Vhosts anlegen: deine Vhost-Vorlage kopieren, Platzhalter durch Script-Parameter ersetzen, Benutzer und Verzeichnis anlegen, Seite aktivieren und Apache neustarten. 

 

I think you got the Idea allright! 

 

Und was sind deine Favoriten?

… Man lernt ja schließlich nie aus! Falls ich was nicht auf der Liste habe, was für dich unverzichtbar ist, teile es mir in den Kommentaren mit!

 

 

Tags: CLI, Linux, Produktivität

• ← Drupal 7: Page TPL für Vokabulare
• Panama-Papers für Webdesigner →