 Kommt rein, ich höre irgendwie hier so ein leichtes Rauschen. Wie auch immer. Hallo, herzlich willkommen. Ja, ihr seid jetzt hier richtig zu meinem kleinen Vortrag, wenn wir den kurzen, knackigen Titel Lasst ein Computer die langweiligen Sachen machen. Automatisierung beim Frontend-Koden. Also es geht um Automatisierung und es geht darum, wie wir uns als Entwickler sind. Entwickler, so ein klein Büschchen, die Arbeit, wenn ich leichter machen können, was ist so? Quasi meine, das grobe Thema, was ich hier so vorgebe. Ganz schnell noch zu mir, ganz kurz. Also mein Name ist Heiko Marmrow. Ich bin Frontend-Entwickler und meinen Spezial-Hauptgebiet sind Teams. Beziehungsweise ich erstelle normalerweise individuelle Teams. Also meine Teams kann man leider nicht im Repository irgendwie finden. Ich mache das wie vielleicht den meisten auch für Kunden direkt. Und ja, ich bin WordPress-Genießer. Ich habe ganz zum Anfang, als ich mich 2012 verlassen habe, ich mich selbstständig gemacht. Und da habe ich mal im Überschwangen mich als WordPress-Experte bezeichnet, bis ich dann 2012 zum ersten Mal bei M damals dieses VP-Camp war und an die echten Experten kennengelernt habe. Seitdem möchte ich dieses Wort nicht wieder auf mich beziehen, sondern ich bin WordPress-Genießer. Ihr seht auch richtig das Dollarzeichen ganz klar. Ich betreibe, oder ich beschäftige mich mit WordPress nicht, weil ich lange Weile habe oder weil ich im Kegelclub bin und da die Vereins-Website-Manager, sondern tatsächlich einzig und allein. Das gebe ich ganz ehrlich und offen zu, um mein Lebensunterhalt damit zu bestreiten. Das ist für mich WordPress. WordPress ist für mich einfach ein Geschäfts-Sache. Darum bin ich sehr froh und sehr dankbar, dass ich die Gelegenheit habe, zum Beispiel hier, in so einem Wordcamp, auch mal so ein bisschen, ja, vielleicht einen kleinen Impuls oder eine kleine Anregung mal an die Community, an euch zurückgeben zu können. Ganz einfach, WordPress Open Source kostet nichts und ich verdiene mein Geld damit. Ich nehme einfach mir das Ganze entgegen. Und wenn ihr selber Entwickler seid, ihr wisst, WordPress ist ja nicht irgendwie drei Zeilen gut. Da steckt eine Menge Schweiß und Blut und Tränen dahinter. Und ja, wir sind auch nicht umsonst das größte, beste, schönste Content-Management-System von der Welt. Aber das ist es ja nicht irgendwie geworden, weil es vom Baum gefallen ist oder weil es irgendwie natürlich gewachsen ist, sondern viele, viele fleißige Hände haben daran gearbeitet oder arbeiten halt immer noch dran. Und so jemand wie ich, der Nutznieser ist, sollte auch auf irgendeine Art und Weise mal versuchen, der ganzen Sache etwas zurückzugeben. Das ist so meine Moral, sozusagen, das mich so betreibt. Danke schön. Aber ihr werdet ja auch nicht hier, wenn ihr das nicht auch in irgendeiner Weise, also schon allein hierherzukommen, ist ja auch schon ein Statement bzw. ist ein Beitrag für die Community. Also ist ja nicht so, dass man als Zuhörer oder Zuhörerin auch nur Nähmerin ist, sondern auch das ist schon etwas, was man gibt. Und ja, klar, ich komme aus Berlin, ich lebe dort, ich lebe sehr gerne zum allerersten Mal in Nuremberg, in Franken. Ja, ist auch nicht schlecht. Nee, das war jetzt nicht, bitte nicht abwertend oder so gemeint, sondern also ich habe tatsächlich gestern, als ich ankam, ja, Kultur ist schon ein bisschen, aber man kommt so aufs Land und das ist alles so friedlich und so ruhig. Das ist schon etwas anderes. Ich wohne im Prenzlauer Berg, Schönhause Allee wenn ihr das kennt, da ist einfach rund um die Uhr, bitte. Da brennt die Luft. Da brennt die Luft, es ist nicht nur dreckige Luft, da brennt auch die Luft, oder sie ist so dreckig, dass sie brennt. Ja, bevor es richtig losgeht, eine Warnung an alle, Automatisierung und so weiter. Und wenn ihr euch mit diesen ganzen Themen vielleicht auch schon so ein bisschen beschäftigt, und es wäre ja wahrscheinlich hier, habt ihr wahrscheinlich ein bisschen Blut geleckt, mehr oder weniger, habt ihr ein bisschen eine Hoffnung oder irgendwas, das fortan, wenn ihr euch der Sache annehmt und das ein bisschen macht und tut und beherrscht, vielleicht euer Leben besser, schöner, leichter wird und so weiter, dass er euch vermittelt, es ist nicht einfach. Das habe ich fett und rot und unterstrichen und alles, was ein Designer ganz bestimmt nicht macht, einfach um das mal hervorzuheben. Es geht hier nicht darum, und das ist nicht einfach sein Workflow, um den es ja letztendlich geht, überhaupt das mal zu identifizieren. Was mache ich da den ganzen Tag? Die meisten, haupt ich immer so fast, Entwicklerinnen und Entwickler, wissen das gar nicht, die machen halt irgendwas, das so ein bisschen zu strukturieren und dann zu gucken, okay, wie kann ich das effizienter gestalten und so weiter. Da ist schon eine Menge Crips dahinter und last and least natürlich die eigentliche Technologie, die da immer dahinter steckt. Ja, das ist nicht einfach. Auch wenn die das alle auf ihren Websites groß hinschreiben, wenn du dieses Tool benutzt, keine Ahnung, dann wirst du Millionär oder du machst alles im Handumdrehen und kannst noch einen zweiten Job machen oder so, absolut nicht, absolut nicht. Das ist aber noch komplexer, komplizierter. Weil jetzt die Frage, ja, warum macht er das denn eigentlich? Also ich, für meinen Teil, ich habe angefangen, also bewusst sozusagen zu automatisieren, diese Sachen, die ich jetzt gleich erklären möchte. Es war irgendwann 2010, 2011, lief mir das so über den Weg und ich fand das spannend, verlockend, ganz klar, es schien einfach zu sein und ich dachte, dann wird das besser bei mir, habe das dann schnell begriffen, dass es nicht einfach ist, aber habe allein schon, dass ich mich damit auseinandergesetzt habe, viel mehr gelernt und bin auch, aber vielleicht auch ein bisschen weitergekommen in meiner Entwicklung. Okay, also habe ich jetzt schon mal mitgenommen, die wichtigste Lektion eigentlich, es ist nicht, es wird nicht einfach, wenn man sich damit beschäftigt. Noch ganz kurz, also Fahrplan, mein Vortrag hat 3 Teile. Teil 1, die langweiligen Sachen, also das, was wir uns so ein bisschen vereinfachen oder verbessern können. Teil 2 ist dann die Automatisierung, wo ich ein bisschen, also keine Angst, das wird nicht zu theoretisch, aber so ein bisschen was erkläre, was man da eigentlich machen kann, über welche Konzepte man dann letztendlich verfolgen kann und lassen und lesen. Natürlich das wahrscheinlich wichtigste für euch, wie macht man es, wie geht das, was muss ich da tun. Also das ist unser Programm, fangen wir an. Lass die langweiligen Sachen dein Computer machen. Was sind die langweiligen Sachen? Was können wir in unserem Fall sozusagen, wo können wir anpacken, was können wir so für Sachen machen? Und da habe ich, ursprünglich hatte ich gedacht, ich habe mir so ein Keylogger installiert, auf meinem Arbeitsrechner. Keylogger kennt ihr vielleicht, das ist ein Programm, wo man seine Tastatureingabe loggen kann. Also es gibt so ein Lockfile, und da steht dann drinnen hier alt f5 oder irgendwas, was ihr da gerade klickt, nimmt das Ding auf. Und dann habe ich mal so versucht, eine Statistik zu machen, um tatsächlich mal den echten Mehrwert zu messen. Ich meine, alle sagen, ja, es ist besser und ich spare und dies und jenes, habe das versucht. Es ist einfach aus 1000 Gründen bei mir gescheitert, aber das, was ich meinen Test entdeckt habe, spiegelt sich hier jetzt ein bisschen wieder um. Ich möchte mal sagen, das ist auch so 300% von dem, was ihr, also ich gehe mal davon aus, ihr beginnt mit der Automatisierung, dann ist das schon 3, 4, 500% von dem, was ihr vielleicht eigentlich macht. Aber ich habe mir so die Highlights mal rausgepickt. Highlight Nummer 1, eigentlich brauchen wir gar nichts anderes zu erzählen, und das war auch mein Messung eindeutiger Sieger, Browser aktualisieren. f5, f5, f5, f5. Hunderte Mal oder vielleicht irgendwie noch viel mehr, macht man das den ganzen Tag, weil klar, wir arbeiten an einem Team und wir schreiben am Code, und am Ende müssen wir gucken, okay, ist denn jetzt mein CSS, was ich da so entwickelt habe, wirklich so awesome, wie ich glaube, oder sind die Boxen jetzt irgendwie zu weit, zu links, zu rechts, oder was auch immer her, und man muss es halt immer kontrollieren. Und da ist es natürlich praktisch, wenn man dieses aktualisieren, automatisieren kann. Aber vielleicht kennt ihr das schon, ich nehme an, ihr arbeitet mit was auch immer für tollen Editorien, für die Entwicklungsumgebung, die bringen schon rudimentär solche Automatisierung mit, das ist super, also wenn ihr so was benutzt, klasse, aber das geht noch viel besser, das geht noch wesentlich besser, weil, also was ihr macht, was ich mache, wahrscheinlich selbst, heutzutage geht nichts mehr ohne responsive design, ist klar, das ist standard, da reden die Kunden schon gar nicht mehr darüber, das erwarten die einfach. Dann habe ich responsive design-Entwickler als Frontend-Coder, was habe ich denn da? Habe ich da ein Browser? Habe ich da ein Endgerät? Nee, also ich habe nachgezählt, bei mir sind es 6 in der Grund, wenn ich halt nur mal so entwickle, ja, dann sind das 6 Geräte. Ich habe meinen Entwicklungsmonitor, so ein Standard-Desktop-Auflösung, ich habe IOS, ich versuche mal jetzt hier keine Namen zu nennen, aber ihr wisst ja sowieso, was ich meine, ich habe IOS, 2 Geräte, also Smartphone als auch diese Tablets, ich habe manchmal auch noch, brauche ich den Safari sozusagen, noch auf, was sind das für ein Gerät, Mac OS X oder so, also ich habe die ganze Mac-Reihe, weil die meisten Kunden von mir, wenn die sich ihre Seiten oder ihre Sachen angucken, die haben sowieso nur ein iPhone oder ein iPad, das habe ich doch gesagt, und das brauche ich, muss ich jedes Mal gucken, so, aber natürlich auch Kunden, die haben Android, Android ist ja nur nicht zu vernachlässigen, und da gibt es aber auch jede Menge Smartphones und da gibt es auch jede Menge Tablets. So, dann habt ihr einfach mal da so Minimum 6, also ich habe aufgehört, ich kaufe mir nichts mehr, ich grenze es einfach, erreicht auch der Schreibtisch, geht ja alles gar nicht mehr darauf. So, dann habt ihr im schlimmsten oder im besten Fall 6 Browser, die ihr mal eben schnell hier, was weiß ich, auf 100 auf 120 Prozent, so passt das jetzt noch irgendwie auf die Reihe, und dann gucken wir mal nach, und dann macht ihr dann 6 mal F5, und dann passt es nicht, oh, ich muss noch wieder ein Pixel abziehen, sagt nochmal wieder 6 mal F5 und so weiter und so fort, oder ihr wollt sehen, okay, der Header ist in Ordnung, aber Moment unten, ich muss ja im Futter, ist da jetzt auch noch bündig oder so was, dann scrollt ihr 6 mal, und da gibt es wunderschöne Tools, oder ein wunderschönes Tool, wunderschönes Tool, womit ich mit irgendeinen von meinen 6 Geräten, wenn ich das scrollte, dann scrollen die anderen auch gleich mit. Wäre sehr schön, jetzt das hier mal zu zeigen, aber das hätte ich jetzt irgendwie ein Riesenanlage aufbauen müssen, aber ich glaube ihr wisst sozusagen, worum es geht, ja, also man erspart sich da eine Menge Arbeit, und das kann ich nur mit solchen Tools, mit solchen so einer Software erreichen, ja, also sobald ich halt irgendetwas editiert habe, in meinem Code, aktualisiert sich der Browser automatisch, okay, aber das ist nicht nur ein Browser, sondern alle Browser, die in meinem Netzwerk sind, die aktualisieren, die diese Seite auf haben, aktualisieren sich genauso, und wenn ich da auf einer Seite scrollte, scrollen die anderen auch gleich mit, ja, also einfach frei, und dann könnt ihr auf der einen Seite könnt ihr gucken, okay, ist das Menü jetzt Dropdown auf dem Desktop in Ordnung, und gleichzeitig seht ihr das, wie das auf dem Smartphone in der mobilen Navigationsvariante dann aussieht, ja. Also wie gesagt, Browser aktualisieren, das reicht eigentlich schon, und das, finde ich, ist auch die beste Einstiegsdroge für diesen Bereich hier. Dann gibt es noch Beautifying und Aclifying, Sekundich, was man machen kann, Formatieren, Prefixesetzen, Linden, Deployen, Zusammenfassenden oder so fort, erkläre ich da noch kurz, aber du hattest noch eine Frage. Nee, es wird die ganze Seite, also dann der Browser, das Fenster, wird aktualisiert, die komplette Seite wird aktualisiert, wenn du sie, also F5 einfach drückst, bitte. Nur der eine Tab, nicht, wenn du jetzt noch 20 andere Fenster und auch nur, du hast dann eine, das kann ich dir nachher noch sehen, eine URL, die hast du in deinem Browser drin, und diese URL, die wird dann automatisch aktualisiert. Vielleicht noch Beautify, Aclify, das sind auch sehr schöne Sachen. Zum einen, also das ist aber so individuell, bei mir ist das so CSS, wenn ich da eine Klas bestimmen, dann muss das alphabetisch sein bei mir. Ich werde wahnsinnig, wenn das irgendwie so ein bisschen durcheinander ist, ich finde das dann auch nicht mehr so gut. Also ich brauche diese, das ist bei mir so drin. Wer wilde jedes Mal ABC, kommt das jetzt Margin, Forepadding oder Padding, Formatchen, solche Sachen, ja, in welcher Reihenfolge ist das? Und da muss ich mich überhaupt nicht drum kümmern. Ich schreibe das nur irgendwie rein, an die Stelle, wo ich es gerade denke, irgendwie zack. Und wenn ich das dann speicher, sortiert mir das Ding automatisch das nach dem Alphabet. Also das ist für mich Beautifying. Man kann auch, okay, Einrückung und so weiter, aber das können eure Editorien sowieso. Und Aclifying meint nichts weiter, aber dass wir meistens Javascript, dass wir dann bestimmte Namen abkürzen können, ABC, 123 und so weiter, und jetzt nicht mehr mit irgendwelchen langen Namen haben. Plus, gerade beim Aclifying, oder auch beim, habe ich das hier überhaupt aufgeschrieben, Minifizieren, also wenn ich meinen CSS oder Javascript-Code Minifiziere, Zusammenpacke, alle Einrückungen rausnehmen, alle Leerzeichen rausnehmen und so weiter, dass ich dann, ja, wenn ich dann den Browser angucke, den Code, und habe da irgendein Fehler und finde den jetzt, kann den Code ja gar nicht mehr lesen, weil das alles so zusammengequetscht ist, dann natürlich eine Code Map, also so ein Map gleich mitzuerzeugen. Das machen diese Tools alle wunderbar. Linting-Testen ist klar, also wenn ich dann irgendwie ein Sündagsfehler habe und speichere, dann findet das Programm das, oder mir korrigiert mir das Programm das, oder zumindest weißt es mich darauf hin. Achtung, du hast hier einen Semikolon vergessen, oder Achtung, die Klammer ist nicht zu oder irgend sowas. Deployment, das kann man nachher vielleicht noch sehen, habe ich mir auch erst in diesem ganzen Zusammenhang angewöhnt. Früher habe ich das quasi alles in einem Verzeichnis geschmissen und habe darin editiert. Das mache ich schon lange nicht mehr, sondern ich habe einen Deployment Dev oder Entwicklung halt dort, dort schreibe ich halt, oder dort entwickel ich, dann habe ich ein Verzeichnisbild, oder im Test habe ich jetzt hier genannt, wo ich den Code veröffentliche für meine Testumgebung und später dann für den Client kann ich das noch auf seinen Web-Server hochladen. Da lade ich dann wirklich nur die Dateien, in dem Format, wie sie beim Kunden auch sein sollen, und nicht noch irgendwelche Zwischenversionen oder irgendwelche überflüssigen Sachen, sondern der Kunde kriegt wirklich nur den Code, den er auch erwarten kann. Das ist sozusagen beim Deploy. Zusammenfassen, ja gut, das kennt ihr auch, Performance best practices, also wenn ihr noch nach alten HTTP-Standards 1.1 und 1.0 arbeiten müsst, dann ist es sehr gut, die Request zu vermindern. Das heißt, seine Javascript und CSS-Dateien und wenn ihr Bilder habt und so weiter, das alles zusammenzufassen, auch das kann man wunderbar automatisieren. Da muss man jetzt irgendwie nicht dran denken, dass man dann hinterher, wenn man Deployt, dann noch schnell das ganze Javascript, irgendwie zusammenkopieren pastet. So habe ich ganz früher das gemacht, also ich weiß wovon ich da rede. Redundanz, auch klar, wir haben, was weiß ich, Starverthemen, da ist ja das erste, was kommt, ist halt so ein globales Reset und dann fangen wir drunter oder danach, sozusagen an, irgendwelche CSS zu definieren und dann haben wir irgendwelche Classen oder irgendwelche Elemente, Text, haben wir dann doppelt und dreifach. Da sagen wir erst Margin 0 und beim nächsten sagen wir dann, ja, aber jetzt Margin 10 oder so und dann wird dieses 0 überschrieben und es gibt quasi Programme, die können solche Redundanzen erkennen und schmeißen mir das aus dem Code raus, dadurch wird das CSS-File, dem Fall kleiner, leichter und schneller, irgendwie die Seite. Auch sehr schön, Umrechnung, ganz beliebt Pixel, in EM, in REM, in Prozent, in was auch immer, kann man ja gar nicht leisten. Also wer will jetzt jedes Mal irgendwie mit einem Taschenrechner daneben sitzen und da irgendwelche Sachen umschreiben. Das ist sehr schön zu automatisieren. Die ganzen Pre-Prozessoren, also las er les und saß, kann ich darüber laufen lassen, Bilder optimieren, also ich habe hier irgendwelche Background-Images für mein CSS und lade da irgendwie das JPEG hoch und das Ding kann das dann nochmal so weboptimieren. Ja, und las dann, ich habe irgendwie mit dazu CSS-Spreis, also ich habe irgendwie Handvoll Background-Images und möchte den Request vermindern, also packe ich die in einen File und da muss ich dann irgendwie mein CSS darauf abstimmen. Das kann man auch automatisieren. Also ich brauche bloß in das Verzeichnis-Image meine Bilder ablegen und den ganzen Rest die Zuweisung das macht dann ein Tool für mich. Also das sind die langweiligen Sachen, aber die sind sehr wichtig und langweilig ist jetzt auch nicht abwertend gemeint, sondern das ist ja einfach nur Dinge, die wir den ganzen Tag machen und eigentlich müssen wir was ganz anderes im Kopf. Wir haben ja ein Konzept, die Website soll so und so werden oder oh, wie kriege ich das jetzt hin, dass mit, keine Ahnung, der Kunde wünscht kein jQuery, der will nur reines Javascript oder der will überhaupt kein Javascript und das soll ich in CSS leisten. Oh Gott, wie mache ich das jetzt am besten und wenn ich dann noch darüber hinaus mit solchen Sachen beschäftigen muss too much, also für mich too much. Also hier nochmal, was ich so mit langweilig meine. Also alles was sich irgendwie wiederholen. Jedes Muster in meinem Arbeitsprozess, alles was ich mindestens 2-mal mache, kann ich schön optimieren. Ganz klar, irgendwann kommt dann auch mal der Faktor Zeitaufwand, aber das ist später. Manchmal kann es sein, dass es zum Anfang länger dauert, sein Tool da zu konfigurieren und das alles so ordentlich hinzubekommen, dass es dann auch das tut, was es tun soll. Aber das kommt natürlich auch hinzu und wichtiger Teil ist natürlich die Fehlerquelle, die ich dann habe, gerade wenn ich das manuell alles erstelle und dann vergess ich es mal oder ich überspringe irgendetwas und da schleichen sich schnell Fehler ein. Wenn ich das automatisiert habe, geht das nicht. Sobald ich speichere, sobald ich einen Task, sozusagen, eine Aufgabe definiert habe, dann, wenn die Bedingungen zusammenkommen, dass diese ausgeführt wird, werden die ausgeführt. Da muss ich mich nie wieder in dem Sinne sein, drum kümmern. Oh, jetzt kommt hier irgendwie so eine Lehre sein. So, Automatisierung. Und wenn wir Automatisierung reden hier beim Koden, beim Frontend-Koden, dann reden wir hauptsächlich von sogenannten Task-Runnern. Task-Runner. Task-Runner schöne Definition gefunden, die das eigentlich ganz gut auf den Punkt bringt. Das ist von Grant. Also ist halt etwas, womit ich meine wiederkehrenden Abläufe bzw. Prozesse automatisieren kann. Und hier wird dann nochmal so Minification komplikiert. Also, all die Dinge, die ich 2, 3 x-mal mache, kann ich mir abnehmen lassen. Und das, was mir das abnimmt, nennt man halt ein Task-Runner. Ich habe mir so als Beispiel gedacht, der Robert passt da ganz gut, wie ein Task-Runner funktioniert. Kann ich sagen, ich habe einen Sohn zu Hause und mein Sohn hat eine Aufgabe, ein Task. Er hat von mir eine Aufgabe bekommen und zwar ist er verantwortlich dafür, den Geschirrspüler einzuräumen. Das ist sein Task. Den muss er ausführen. Er ist eigentlich alt genug, 14 Jahre, da sollte das klappen, aber natürlich nicht. Und irgendwann, das Ding quillt über oder ist schon vor einer Stunde abgelaufen, das Programm und ich renne vorbei. Ich sehe, hey, das Ding ist irgendwie noch nicht fertig. Dann gehe ich ins Kinderzimmer, rüttel an seinem Computer, mache ihn nach und sage, Geschirrspüler, ich brauche nur diesen Task aufrufen, Geschirrspüler. Und schon weiß er Bescheid, was da zu tun ist. Wir haben ihn irgendwann mal konfiguriert, eingestellt. Das ist ein Taskmal. Das ist genau dasselbe, was diese Tools hier machen. Ich habe nur irgendwann ihm mal beigebracht, okay, pass auf, das da nennt man Geschirrspüler, das ist ein Geschirrspüler. Und wenn der folgend Zustand hat, entweder die Klappe ist zu und da blinkt so eine Null, dann heißt das, mach die Klappe auf, das Ding ist voll, räume aus, pack es ein oder wenn sich da oben drauf irgendwas türmt, schieb den da rein und mach das Ding an. Also eine ganz einfache, simple Aufgabenbeschreibung oder Konfiguration, die ich da gemacht habe und da reicht ein Befehl. Faddas kommt ins Kinderzimmer, guckt streng, Geschirrspüler und dann kann Faddas wieder gehen. Das ist Automatisierung. So funktioniert auch Automatisierung bei uns und es ist sogar einfacher. Also das ist wirklich einfacher als ein Kind zu programmieren. Okay, also ich denke mal, so ist klar, es ist keine Raketenwissenschaft oder was ein Taskrunner ist bzw. wie der so im Grunde funktioniert. Ja, wahrscheinlich habt ihr euch ja auch schon, also ich denke mal, die Namen sind bekannt, aber ich will ja mal so ein bisschen durchs Programm gehen. Also der bekannteste nehme ich mal an und der verbreitete wo es die meisten Plugins, die meisten Packages gibt ist Grunt. Grunt war auch mein Tool der Wahl. Damals, als ich angefangen habe also da kannte ich eigentlich auch nur Grunt hab dann später von den anderen erfahren und mit Grunt hab ich angefangen und hab das auch viele Jahre betrieben. Aber irgendwann bin ich abgesprungen den zweiten kennt ihr wahrscheinlich auch Galb, ist dasselbe in nämlich Grün, sondern Rot ist auch ein Taskrunner inzwischen auch ordentlich also mit allen Tasks versorgt. Ich hab noch keinen Task gesucht, den ich eigentlich auch gefunden hätte. Also da gibt es auch genügend Sachen bzw. Packages. Den kann man nehmen, hab ich auch eine ganze Weile benutzt, fand ich, also falls ihr die Qual der Wahl noch habt falls ihr irgendwie fragt, ja was ist das beste Schönste und so weiter also meine persönliche, das ist natürlich jeder kann mit seiner Fassung glücklich werden, aber ich für mich hab festgestellt Galb ist wesentlich, also zumindest meinen Denken kommt das besser nach wesentlich schöner zu konfigurieren also diese ganzen Pipes die ich da so machen kann das ist natürlich smarter als bei Grunt aber jeder müsst ihr ausprobieren bitte Galb sagt man sei sogar schneller als Grunt aber am Ende ist das eine Konfigurationsfrage also wie du das Ding letztendlich einstellst und wenn du den so einstellst dass der erstmal über dein komplettes WordPress-Installationsverzeichnis da watching soll, ja klar dann kriegst du jeden in die Knie wenn du das normal vernünftig machst möchte ich sagen, hab ich da keinen Unterschied also von der schnellen, ja Galb nein ja und nein, aber so wenn du es normal betreibst würde ich sagen merkst du nichts und wenn dann ist das so ein Bruchteil von Sekunden höchstens ich hab's auch nie gemessen also ich hab keine ja dritte der auch noch so im Feld ist, hab ich immer nie benutzt Brokkoli dann ja wohl Brokkoli Schießt wild das ist aber jetzt ferner liefen da gibt es ganz viele Make, also Knutmake da gibt es Rake da gibt es, haben wir den, Jake da gibt es, ach ich weiß nicht, ganz viele aus dieser Ecke von denen kann ich aber nichts sagen und die sind auch zum Teil für andere Systeme also die sind jetzt für unseren Fall als Frontende jetzt nicht unbedingt nicht zu gebrauchen den kannte ich auch noch nicht Memusa ist mir jetzt tatsächlich erst in der Vorbereitung über den Weg gelaufen und da war ich sehr angenehm überrascht also den werde ich mir definitiv in der nächsten Zeit nochmal selber angucken weil das fand ich ganz smart also wäre auch noch eine Option, aber wie gesagt auch nur einer vom vielen wobei ich oder wo ich aktuell gelandet bin ist nichts weiter nichts anderes als NPM das ist der den ich selber in meinem täglichen Arbeit benutze wie gesagt nehmt was ihr wollt das ist jetzt hier nur, das kann keine Bewertung sein das ist hier nur eine Rundumshow ich selber komm inzwischen am aller besten mit NPM klar ich weiß nicht wer NPM auch gibt es ein paar aber für die anderen ist eigentlich ein Paketmanager Node Package Manager so wird es ausgesprochen NPM und ist eigentlich gar kein Taskrunner oder jedenfalls nicht als Taskrunner entwickelt worden oder konstitutioniert worden sondern als Paketmanager das heißt das ist ein Tool für eine Software die ich installiere die nötigen Abhängigkeiten erfüllt das was ich mir persönlich zum Beispiel von unserem Plugin Repositority oder von so anderen Sachen im Workbiz auch wünschen würde, dass wir auch so eine Art Paketmanagement dort hätten und das ist hier einer der für Node Node ist eine Plattform JavaScript die ich serverseitig für das javascript ausführen und wenn ich da serverseitig sozusagen irgendwelche javascript oder Programme installieren möchte dann mache ich das mit diesem NPM dafür ist das Ding gedacht und allein dass irgendwelche Leute für das gleiche Video auf die Idee gekommen sind dass diese Feature die dieses NPM mit sich bringt ja auch genauso gut für oder als Taskrunner benutzt werden können das fand ich schon so verrückt ich muss sich das auch gleich mal ausprobieren und tatsächlich also für mich ich finde es inzwischen besser als als GALP und da by the way der hat tatsächlich ein Problem mit der Performance also hier ist es zu merken der ist ein bisschen hakels an einigen Ecken und Kanten aber vielleicht bin auch nur das bin das nur ich, also das weiß ich noch nicht ich bin noch nicht so ein Zipfel vertraut oder meine letzten Sommer, Herbst irgendwann habe ich mir das übernommen und mache damit meine ganzen Projekte aber so richtig den Feinschliff habe ich dann noch nicht wie auch immer also ich möchte jetzt die Sachen, ich komme jetzt gleich zum how to und ich möchte ihnen sagen also das was ich in dem how to erkläre, erkläre ich mit NPM, auf Grundlage von NPM aber anyway das ist jetzt nur als Beispiel ihr könnt diese Sachen mit jedem anderen Taskrunner genauso machen, also ob ihr oder Brokkoli oder GALP oder sowas benutzt, ist im Prinzip egal unterscheidet sich natürlich in der ja sagen wir mal Sündhacks von der Konfiguration aber das Ergebnis ist in jedem Fall dasselbe also da müsst ihr nicht aber es geht jetzt nur um mal um zu zeigen was geht oder wie das geht und egal ob ihr GALP und GRUNTS benutzt oder eben NPM, was ihr auf jeden Fall braucht wir kommen zum how to wie gehts los, wie starte ich also ich möchte jetzt mal das ausprobieren mit Taskrunner wie starte ich GALP, GRUNTS, NPM sind natürlich Anwendungen die auf Node Node.js laufen also wenn ihr sowas machen möchtet braucht ihr in jedem Fall Node ihr müsst euch Node installieren das ist aber auch keine Hexerei das ist im Prinzip recht simpel, relativ einfach und das Schöne ist wenn ihr Node installiert habt ihr NPM mit dabei also ihr müsst nur Node installieren und dann habt ihr NPM könnt ihr das sofort loslegen damit also habe ich jetzt noch unten die links also wer das mal für später haben möchte ich habe auch also die wird natürlich veröffentlicht und auf der Website bei mir und natürlich hier wird das dann also die ganzen links und so weiter die kriegt ihr dann alle noch richtig gelingt also es gibt das ein bisschen besonders für Linux muss ich über diese Github Adresse dort gehen da gibt es ein Package ich nehme mal an die meisten von euch wenn überhaupt Linux Ubuntu sowieso und das ist oder Fedora was auch immer kein Problem und alle anderen die haben sogar noch einen Ticken einfacher also macOS und Windows da gibt es dann direkt von auf der Node.js Seite ein Installer-File das könnt ihr euch runterladen starten und ihr seid schon dabei also die Installation dauert keine 5 Minuten besser noch als Wordpress selber also das ist die Basis wenn ihr das machen müsst braucht ihr in jedem Fall Node ihr braucht in jedem Fall NPM auch für die anderen für GALP und GRUND braucht ihr sowieso auch NPM das ist ja der Witz an der Sache dass sie dann oder dass viele dann gesagt haben von den Frontenden, Moment mal wenn NPM auch das kann was GALP kann wozu brauche ich dann GALP eigentlich noch dann springen die meisten ab oder gehen dann halt runter und so ist das auch bei mir also es wird dann auch viele Sachen wesentlich einfacher dann zu managen also wir haben uns jetzt Node auf unserem Server also auf einem lokalen Server installiert und NPM ist jetzt auch mit dabei jetzt haben wir irgendwie unser kleines Testprojekt, unser kleine Sache wo wir uns mal ein bisschen dran rumspielen wollen wie geht's los was muss ich tun, was sind die Steps Schritt Nr. 1 na klar ich muss ich gehe erstmal auf mein Verzeichnis also in dem Fall wenn wir Themes entwickeln also wenn ich ein Theme entwickel dann habe ich irgendwo mein Entwicklungs so ein Theme klein und dann nenne ich das irgendwie ThemeExample zum Beispiel oder ThemeXY was auch immer und da gehe ich dann rein in dieses Verzeichnis also das muss ich dann so zusammen öffnen ich gehe natürlich nicht mit eurem Dateimanager oder Explorer den ihr da habt sorry das hätte ich noch sagen müssen das ganze findet auf der auf der Konsole, auf dem Terminal statt also ihr müsst ja mal so ein bisschen ins kalte Wasser springen macht mal euren Terminal auf und dann werdet ihr ja könnt ihr diesen ganzen Spaß dort machen auch ich war früher so GUI Typ also hab lieber mit der Maus mir alles ruckzuck zusammengeklippert oder hatte meine Tastenkombination die hab ich jetzt auch die Tastenkombination aber die Maus ist so ein bisschen arbeitslos geworden und tatsächlich auch das arbeitet sich viel flüssiger viel schneller also kann ich zumindest viel besser arbeiten in jedem Fall ihr müsst jetzt quasi im Terminal in euer Verzeichnis reingehen wo ihr das das Theme angelegt hat und dort braucht ihr nichts weiter als dieses MPMinnit diesen Befehl eingeben ändern und dann läuft da so automatisch so ein Wetsch durch die fragt euch nach einem Namen eigentlich braucht ihr bloß Enter, Enter, Enter drücken und dann willst du das wirklich ja zack Enter und dann ist das MPM initiiert und das ist angelegt und woran erkenne ich das dann werde ich nämlich Punkt 2 in meinem Rout Verzeichnis wo ich das Theme angelegt hab also in dem Einstiegsverzeichnis von dem Theme werde ich diese Datei Package jazen finden Package jazen die kann man sich dann aufmachen und so sieht sie dann aus 12 Zeilen, 11 Zeilen Code wo einfach nur das ist jetzt nur Standard also ich hab einfach nur Enter, Enter gedrückt und das war's wenn ihr noch nie eine jazen file gesehen habt das macht nix, lasst euch nicht beeindrucken man muss einfach nur verstehen sozusagen die Struktur so ein bisschen auf sich wirken lassen darüber meditieren dann seht ihr okay, da gibts irgendwie so ein Wrapper so eine große Klammer da kommt halt irgendein Namen rein dann kommt dann eine Version dann gibts eine Versionsnummer ein und so weiter und so fort und für uns interessant ist diese Zeile 6 Skrips und alles was da drin steht in dem Fall das ist so ein Standardgeschichte Test vergisst was da steht aber dort wo Test steht das ist unser Task also der Task in dem Fall heißt Test und der Befehl der da ausgeführt wird da ist nichts in dieser Reihe dort drin aber das was da steht ist jetzt erstmal egal sondern ihr wisst nur, aha meine Tasks bei npm schreibe ich dort rein so hab ich das erstmal so verstanden also nur erstmal so sacken lassen sozusagen gehts weiter ich muss meine Pakete einladen ich hab jetzt ein Taskrunner okay das ist npm das ist mein Sohn mein Sohn weiß aber noch nix vom Geschirrspüler der kann mit dem Geschirrspüler noch nichts anfangen hat er noch nie gesehen und hat keine Ahnung dass man da eine Klappe aufmachen muss und dass man da das dreckige Zeug rein und das Saunere wieder rausräumt das muss ich ihm ja irgendwie beibringen das muss ja irgendwie sozusagen so ein Ablaufprozess so und da gibt es verschiedene Packages sogenannte Packages die halt irgendwelche Dinge können jetzt zeige Beispiel gemacht das Package Autoprefixer habt ihr vielleicht auch schon gehört Autoprefixer es gibt ja diverse CSS Anweisungen die laufen nicht unbedingt so wie sie sind in jedem Browser die brauchen halt so genannten prefix und jetzt jedes mal wenn ich was was ich z.B. genannt transform wenn ich transform Anweisungen mache dann muss ich jetzt noch irgendwie keine Ahnung für Mozilla oder für wen auch immer da noch so ein extra prefix drüberschreiben, das will ich nicht das will ich automatisieren und dafür gibt es das Package z.B. Autoprefixer und damit das auf mein Computer kommt wieder ins Terminal einfach und dort wo ich diesen Innetbefehl vorhin gestartet hab schreibe ich jetzt rein MPM ruf ich MPM halt immer auf weiß der Bescheid install also weiß er okay, er muss was installieren dieses Save Dev schreibt es einfach rein das ist jetzt egal warum das da so steht und das was ich da in Klammern geschrieben hab das schreibt ihr dann in dem Fall Autoprefixer rein entern kurz warten und dann ist Autoprefixer in euer Verzeichnis oder dann kann MPM diesen Autoprefixer benutzen dann weiß es okay was das zu tun hat wenn ich den aufrufe jetzt gucken wir uns nochmal die Package genau jetzt seht ihr hier unten auf Zeile 11, 12, 13 hat er so ein Dev Dependies angelegt und da steht jetzt unser Autoprefixer drin und rechts daneben ist die Versionsnummer anyway was da steht ist egal das ist der Package Manager der weiß okay was für eine Versionsnummer und wenn er das nächste mal updated oder so oder nein da gibt es eine Abhängigkeit muss euch aber nicht interessieren ihr wisst nur okay ich hab jetzt mein Autoprefixer installiert und das macht ihr zum Anfang wenn euer Projekt beginnt dann überlegt ihr okay was brauche ich alles ich brauche halt prefixes dann nehm ich den Autoprefixer ich will mein Browser aktualisieren dann nehm ich irgendwie so ein Browser Reload Tool ich will irgendwas Konkatinieren dann nehmt ihr also ein Konkatiniert Package dann installiert die einmal da rein dann habt ihr sozusagen eure Grundeinstellungen gemacht jedes mal wenn ihr das Projekt weiterarbeitet ne Woche später ne Jahr später aber noch immer sind diese Sachen ja schon installiert ihr könnt einfach mit den Dingern weiter machen so und dann kommt man zum spannenden Teil okay wir haben jetzt sozusagen npm den Autoprefixer installiert jetzt wollen wir uns natürlich mal um die Skrips beziehungsweise Task also Skrips ist quasi Synonym zu Task im Pfeil steht natürlich Skrips aber das sind unsere Task die da abgelegt werden du hattest was ne ne ne ne ne in jedem Theme hast du dein eigen also du musst jedes mal wenn du ein Theme anlegst legst du die rein ja gut kann ich jetzt nicht zeigen ich hab aber einfach so ein mir mir als Snippet abgelegt dieses npm install und da hab ich mir all die ich sowieso immer benutze also Autoprefixer sowieso das sind so die Standard Sachen so wie man vielleicht wenn man neues WordPress installiert immer seine Standard Plugins hat die man sowieso jedes mal mit installiert so hab ich mir so ein Einzeiler geschrieben und den hau ich einmal rein und dann sind alle Prefixes da alle Packages installiert also das musst du schon für jedes Projekt natürlich neu konfigurieren du hast ja auch was was ich beim Deployen bei dem einen willst du hierhin Deployen oder da hast du irgendwelche Filter vielleicht die du mal setzen willst Abhängigkeiten und die unterscheiden sich ja schon von Projekt zu Projekt im Prinzip kannst du das Copy und Paste und kannst das dann anpassen aber ist nicht meine Empfehlung ich würde das jedes mal neu Blank installieren genau die liegen einfach zeig ich ich hoffe ich hoffe ich komm doch also hier nochmal kurz gezeigt das sind jetzt das ist so meine was ich gerade sagte meine Standard was ich ohne nachzudenken worum es eigentlich in dem Projekt geht sowieso erst mal jedes mal mitinstalliere beziehungsweise was ich schon vor defiliert habe da habe ich hier oben den ersten Task Sync da will ich halt bestimmte Dateien von A nach B übertragen also zum Beispiel von meinem Def Verzeichnis auf das Bild also auf das Test Verzeichnis und so weiter da seht ihr auch da ruft er mir so eine Datei rsyncwrapper.js und in dieser Datei habe ich nochmal genau konfiguriert welchen Filter möchte ich haben und so weiter und so fort ist aber jetzt zu viel des Guten hier Post CSS das ist ganz wichtig also wer irgendwie was ja mit CSS also arbeitet mit irgendwelchen Sachen ich benutze hier dem Fall Post CSS und habe jetzt hier wenn ihr guckt in der Zeile Post CSS use also dieses Fleck und dann kommt der Autoprefixer also wenn ich diesen Post CSS starte dann ruft er mir auch den Autoprefixer auf dann habe ich hier noch dieses Post CSS Sorting also das ist das Package was schön alphabetisch mir meine Anweisungen sortiert da kann man auch andere Sortier reinfolgen wie ihr das gebrauchen könnt da kann ich halt ja wenn ich wenn ich jetzt irgendwelche Styles habe die mal wieder der Safari oder der aktuelle Internet Explorer noch nicht kennt dann kann ich da so eine Art Workarounds mit reinbauen CSS Nano das ist so ein Minification Tool was mein CSS File minifiziert und da noch so ein Mapping draus macht ja anyway und dann geht das von Build CSS Example zu SSE also von Source Example also ganz rechts zu Bild wird das dann übertragen das sind jetzt in dem Fall ist es eine Datei da kann ich auch noch verschiedene andere Sachen ich kann auch ganze Verzeichnisse und so weiter und so fort das machen Browser Sync das ist der Task oder das ist das Package was dafür sorgt, dass ich nur mit einmal Browser das sich dann auf diesen anderen Browser das da auch alles bewegt und macht und tut Watch Sync also Watch ist dann immer der Task der aufpasst auf bestimmten Verzeichnissen oder Dateien oder irgendwelche Sachen die ich definiere das jedes mal wenn ich da speichere automatisch dann irgendwelche Tasks gestartet werden also es ist wie so ein Metatask was ich dort habe, alles was in diesem Watch als Task definiert ist das seht ihr ja da in der Watch Sync, Post CSS und Browser Sync wird gestartet sobald ich speichere also wenn ich mein Pfeil speichere dann laufen diese anderen Tasks stoßen werden die angestoßen durch diesen Watch Task das ist jetzt mal so ganz grob also ich will ja auch nicht das ist jetzt nicht so überfährt dass die Tasken länger werden das ganze Pfeil also da ist eigentlich der Fantasie dann keine Grenzen gesetzt das sind wir schon bei 5 Minuten gut let's try Moment, kurze Umbau ich hoffe das geht jetzt hier alles so wie ich das tun möchte seht ihr was ja und so sieht das Ganze, das wollte ich jetzt nicht zeigen ich wechsle hallo achso ok und das ist jetzt hier mein achso, also ihr seht hier meine IDE wie man es halt kennt links habe ich die ganzen Files aufgelistet also Example ist mein FIM, sag ich mal mein FIM Verzeichnis und da gibt es darunter ein Bild Verzeichnis also das ist das wo es hinfliegt und von dort aus kann ich es auch auf dem Kunden-Server oder wie auch immer verteilen MBA Project könnt ihr ignorieren das ist einfach ein Konfig von meinem IDE dann habe ich dort ein Verzeichnis Node hier das zeige ich jetzt nur mal sind alle diese ganzen Packages die ich hier so installiert habe also da sind Packages und Sub- und Sub-Packages das müsst ihr ja eigentlich nicht reingucken das ist jetzt nur und das sind die Dinge die kannst du dir auch nehmen weil du eine Frage war das könnt ich jetzt kopieren und ein anderes Verzeichnis rein und das nochmal initiieren und dann läuft das aber muss man nicht haben und da macht man manchmal die Weisung der Macht mehr kaputt dann habe ich hier noch einen das ist auch spannend aber es ist für später mal dass ich mich da jetzt drinne deswegen ignore erstmal und das eigentlich spannende ist dann hier mein SRC also Source Verzeichnis das ist mein eigentliches Arbeitsverzeichnis da drinne da drinne schreibe ich und da habe ich jetzt hier so ein Verzeichnis CSS und hier ist meine Example CSS also das ist die Datei in der ich normalerweise danach werde und hier ist JSON file also das was ihr ja auch rechts gerade sehen könnt so ist eine Standard Package JSON von mir wenn ich anfange wenn das Projekt beginnt dann habe ich erstmal so meine Dinger die ich sowieso immer benutze und ihr seht also ist egal was da jetzt ist ihr seht hier unten seht ihr wieder diesen Skrips und da sind meine Tasten das ist im Prinzip dasselbe was ihr eben schon screenshot gesehen habt und das ist eigentlich das spannende an diesen das kann ich dort dort reinschreiben und ich kann das noch verketten und tausend Sachen halt mitmachen noch spannender umschalten was ihr jetzt seht ich habe jetzt mal diese Datei Example nicht also da das habe ich jetzt hier mal rechts aufgemacht diese Example CSS oben irgendein Kommentar ist egal ist jetzt von ich glaube von Anderscore und das einzig spannende ist hier diese kleine Dreizeiler hier hier habe ich ein A Element also ein Anchor Tech und schreibe hier um so ein Rotate 45 Grad das habe ich jetzt geschrieben gut es ist jetzt erstmal schön wir waren ja beim Autoprefixer und das ist jetzt so ein Standard Element wo der Autoprefixer verwenden solltet wenn ihr für alle möglichen Browser das auch verwendbar machen möchtet also das habe ich jetzt hier reingeschrieben so und früher hätte ich jetzt diese Prefixe ich glaube 2 oder 3 müsste ich jetzt dafür definieren muss ich die schön von Hand reinschreiben oder ich hatte mir dann mal so ein Snippet gemacht und habe die dann so reinkopiert und habe dann bloß noch die Werte dann eingetragen braucht ihr alles nicht mehr machen sondern was ihr eigentlich nur machen müsst ist hier Speicher wenn ihr jetzt hier in meinem Bild verzeichnet ist also da wo die Maus jetzt ist zack da oben also da ist jetzt noch leer das Verzeichnis ist jetzt noch leer so jetzt wollen wir mal gucken ob das auch so klappt also ich habe jetzt hier geschrieben ich muss jetzt hier einfach mal ich darf das ja die letzte Zeile das Mikroland wegmachen einfach nur damit ich was verändere in dem Code sonst funktioniert das hier nicht so ich habe jetzt hier Code geschrieben jetzt schauen wir mal hier diese Transform-Geschichte da reingeschrieben Speichere, Wartung, Ctrl-S zack Achso Anfänger natürlich ich muss ja meinem Watch genau ich muss ja meinem Sohn sagen der kommt ja nicht von alleine auf die Idee okay jetzt ist hier mal Zeit irgendetwas zu machen am Geschirrspüler ich muss den ja erstmal starten das ist ganz gut dann seht ihr das auch gleich also wie startet man das da gehe ich jetzt in meinem Fall ich mach das jetzt mal über die IDE jetzt nicht im Dings so und hier habe ich jetzt meine ganzen Tasks und hier Watch das ist mein wichtigster Task den starte ich einfach indem ich da drauf komme jetzt kommt da unten irgendwas bla bla bla genau jetzt gestartet achso hier seht ihr übrigens das war ja früher auch noch eine Frage achso einfach dreimal klicken hier zum Beispiel dieses http localhost bla bla könnte ich jetzt in meinem wenn ich in dem Netzwerk natürlich nur drinne bin in meinem Smartphone, in meinem Tablet und wo auch immer eintragen und diese Seite wird dann immer quasi mitaktualisiert also das wird dann immer genau ich kann das auch konfigurieren ich kann jetzt auch irgendein Domain was auch immer was ich da auf meiner Umgebung hab ja euch austoben hier in dem Fall das ist jetzt nur localhost halt und genau das muss natürlich in meinem lokalen letztendlich im lokalen Netzwerk vorhanden sein also ich hab jetzt hier mein Watch gestartet das hier ist jetzt auch erstmal egal schreibe hier mein Code jetzt kann ich es wieder ordentlich schreiben mit was geschrieben genau jetzt hab ich und seht ihr Tata da haben wir einmal die Example CSS und die Example Map jetzt machen wir die mal auf so und so sieht jetzt der Code danach aus also ich weiß nicht ob ich das jetzt hier so über Kopf arbeiten so links vorher rechts nachher in dem Fall ist es nur eine Zeile jetzt sieht das irgendwie ein bisschen mehr aus aber stellt euch vor ihr habt jetzt links ich weiß nicht standard 1000 Zeilen CSS Code und so weiter dann ist das auf der rechten Seite aber wesentlich kompakter, das ist alles minifiziert und ihr könnt's sehen rechts hier hat er mir für Webkit da hat er im Prefix ran geschrieben hat er noch mehr also hat er mir gemacht und er hat mir noch gleich ein Source Map mit ran gehängt das ist ja diese Mapfile so sieht dann noch mal dieses Mapfile aus das will ja niemand ernsthaft stopp stopp stopp wir könnten dir noch dünn lang zuhören wir müssen uns natürlich beenden aber ich denke ihr habt jetzt erstmal so das Grundprinzip gesehen und hoffentlich verstanden worum es geht eigentlich wären jetzt noch Fragen dran aber ich glaube das können wir nicht mehr ich bin ja noch hier bis Montag einschließlich also frag mich Löchern im Mauch ansonsten schönen Tag und danke fürs zuhören