Share
Die Arbeit mit der Kommandozeile galt lange Zeit als außerhalb des Webdesigners. Es wurde fast ausschließlich für Serveradministration und Dateiverwaltung und für alle Arten von Dingen verwendet, die nichts mit den täglichen Prozessen des durchschnittlichen Webdesigners zu tun haben.
Das war in der Vergangenheit vielleicht der Fall, aber heute könnte es nicht weiter von der Wahrheit entfernt sein.
Heutzutage gibt es Tausende von unglaublichen Befehlszeilen-Tools, die speziell für Front-End-Sprachen und -Workflows verfügbar sind. Die enormen Vorteile, die sie bieten, bedeuten, dass die Nutzung der Befehlszeile für Webdesigner immer wichtiger wird.
Einige häufig verwendete Befehlszeilen-ToolsIch gebe zu, für einige Zeit, nachdem ich auf diese Art von Webdesign-Tools gestoßen war, war ich ein bisschen „Command Line Phobic“. Ich war von der Idee „für Programmierer, nicht Designer“ beeinflusst, und ich habe immer nach anderen Optionen gesucht Anstatt die Befehlszeile auszuprobieren.
Dann machte ich endlich den Sprung, als ein Projekt, das ich unbedingt verwenden wollte, unvermeidlich eine Interaktion über die Befehlszeile benötigt. Ich war anfangs ein wenig eingeschüchtert, aber zu meiner sehr angenehmen Überraschung rief ich mich schnell aus:
"Das ist großartig, ich weiß nicht, warum ich vor so langer Zeit nicht angefangen habe zu lernen!"
Heute verwende ich die Befehlszeile in fast jedem Webdesign-Projekt und wäre auch nicht ohne. Es ist in fast jeder Phase eines typischen Webdesignprozesses unglaublich nützlich.
Aber hier ist die Sache, selbst jetzt könnte ich nicht die meisten Dinge tun, die Sie in einem typischen Tutorial "Erste Schritte mit der Befehlszeile" finden, wenn mein Leben davon abhängt. Wenn Sie nie lernen, wie man geht mkdir oder CD oder ls es spielt keine Rolle Die Wahrheit ist, dass Sie als Webdesigner wirklich nichts davon brauchen. Die einzigen Befehlszeilenfähigkeiten, die Sie benötigen, sind diejenigen, die Ihre Webdesign-Projekte direkt effizienter machen.
Deshalb geht es in dieser Serie nicht darum, „obskure Befehle für Aufgaben auszuführen, die Sie nie tun“. Auch handelt es sich nicht um einen „komplizierten Entwicklungsprozess, der für Designer leicht zu handhaben ist“. Dies ist eine Serie speziell für Webdesigner, zeigt Ihnen, wie Sie Werkzeuge einsetzen, die besonders für Webdesign-Projekte äußerst nützlich sind.
Wenn Sie erst einmal die Befehlszeile in Ihre Entwurfsprozesse einbeziehen, wird dies eine völlig neue Welt von Optionen eröffnen, die große Teile Ihrer kostbaren Zeit sparen, und ich verspreche, Sie werden nie zurückschauen.
In dieser Reihe von Tutorials erfahren Sie kommandozeilengesteuerte Prozesse, die möglicherweise die Art und Weise ändern, wie Sie das Webdesign dauerhaft angehen.
Nachdem Sie mit den Grundlagen begonnen haben, können Sie sofort in die praktischen Fähigkeiten einsteigen, die Sie sofort einsetzen können. Wenn Sie sich die einzelnen Themen ansehen, die wir behandeln, werden Sie sehen, warum die Befehlszeile ein unverzichtbares Werkzeug für das Webdesign ist.
Lassen Sie uns kurz die Themen durchgehen, die wir in dieser Serie behandeln werden. Es gibt fünf Hauptthemen:
Webdesigner verwenden häufig Pakete von Drittanbietern wie jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css und eine lange Liste anderer. Vor der Befehlszeile bedeutete das Verwenden dieser externen Pakete normalerweise:
Der manuelle Umgang mit der Paketverwaltung ist langsam und unhandlich, aber mit der Befehlszeile gehört dies der Vergangenheit an.
Sie können Pakete direkt in Ihre Projekte ziehen, indem Sie einfach ein paar Wörter eingeben:
Bower installieren Jquery
Sie können Pakete auf dem neuesten Stand halten, indem Sie einfache Wörter wie die folgenden eingeben:
Bower Update Jquery
Sie müssen Pakete nicht mehr manuell aus dem Internet herunterladen oder bei Änderungen manuell aktualisieren. Dies ist nur ein kleiner Vorgeschmack auf die Möglichkeiten, die Sie mit der Befehlszeilenpaketverwaltung tun können.
Die drei Sprachen, die am häufigsten in einem Webdesign-Projekt verwendet werden, sind CSS, HTML und JavaScript. Befehlszeilentools eröffnen neue Wege, um die Produktion und Bereitstellung von Code in diesen Sprachen effizienter und leistungsfähiger zu machen.
Eine der wichtigsten Funktionen, die wir für die Befehlszeile für CSS verwenden können, ist das Kompilieren von Präprozessoren wie Stylus, Sass / SCSS und LESS. Mit der Befehlszeile können Sie schnell eine Präprozessor-Datei kompilieren, indem Sie einige Wörter eingeben. Sie können die automatische Kompilierung auch so einrichten, dass Ihre CSS-Dateien immer neu kompiliert werden, wenn Sie Ihre Präprozessor-Dateien ändern.
Über die Befehlszeile können wir außerdem unsere CSS-Workflows durch automatische Korrekturen, Dateibereinigung und Komprimierung verbessern. In ähnlicher Weise können wir auch unser JavaScript mit Dateikettung und -minifizierung optimieren.
Und für HTML erhalten wir Zugriff auf Sprachen wie Jade, die uns sowohl die Möglichkeit bieten, HTML in Kurzform zu schreiben, als auch die Möglichkeit, einfache, jedoch hoch entwickelte Templatensysteme zu entwickeln, die verhindern, dass Code-Stücke, die sich in Projekten wiederholen, neu geschrieben werden müssen.
In der Lage zu sein, CSS mit ein paar Wörtern zu kompilieren, und dann JavaScript mit ein paar anderen Wörtern zu minimieren, ist großartig. Aber wenn die Dinge wirklich super werden, dann können Sie es tun alles Ihr Projekt benötigt alle auf einmal mit einem einzigen Befehl.
Mit einem so genannten Task Runner kann ein Befehl wie ein einzelner Befehl verwendet werden Schluck oder grunzen Sie können festlegen, dass Ihre Präprozessordateien kompiliert werden. Anschließend wird das resultierende CSS kombiniert, autoprefix, bereinigt und komprimiert. Anschließend werden Ihre Jade-Dateien in HTML-Code kompiliert und Ihre JS-Dateien innerhalb weniger Sekunden verkettet und verkleinert.
Sie können Task-Läufer auch so einrichten, dass Sie diese Dinge freihändig erledigen können. Nach dem Ausführen eines Befehls wie schluck zu sehen oder grunzen beobachten Sie können einfach mit den Rohdateien Ihres Projekts arbeiten, während im Hintergrund die Kompilierung und Optimierung automatisch für Sie erledigt wird.
Task-Läufer sind völlig flexibel und können nach Belieben konfiguriert werden, so dass die Möglichkeiten, wie Sie Ihre Projekte einrichten können, kein Ende haben. Passen Sie die Einstellungen einfach an die jeweiligen Gegebenheiten an.
Beim Live-Nachladen können Sie den Finger von der Aktualisierungsschaltfläche nehmen und sich darauf konzentrieren, in Echtzeit Feedback zu Ihren Konstruktionsänderungen zu erhalten.
Nachdem Sie über eine Automatisierung mit Task-Läufern verfügen, können Sie Live-Reload direkt in die Mischung einfügen und in jede Konfiguration integrieren, die Sie für Ihre Projekte erstellt haben. Sie können genau entscheiden, was Live-Reload auslöst, sei es die Preprozessor-Kompilierung, HTML-Änderungen oder alles, was Ihnen gefällt.
Beim Aktivieren des Live-Nachladens erhalten Sie auch eine auf einem localhost aufgeräumte Site-Vorschau, d. H. Eine Simulation eines Webhosts, der auf Ihrem lokalen Computer ausgeführt wird. Dies ist großartig, um sicherzustellen, dass alles wie erwartet funktioniert http: // Protokolle, im Gegensatz zu Datei:// Protokolle.
Darüber hinaus erfahren Sie auch, wie Sie die Browsersynchronisierung in Gang setzen können. Dabei erhalten Sie eine URL, die Sie in mehrere Browser eingeben können, um sie alle miteinander zu synchronisieren. Klicken Sie beispielsweise in Chrome auf eine Navigationsschaltfläche und sehen Sie dann, wie Firefox, Opera und Safari gleichzeitig auf dieselbe Aktion reagieren.
Diese Browsersynchronisierung ist auch nicht auf ein Gerät beschränkt. Sie können auch die gleiche URL auf Ihrem Tablet, Telefon und jedem anderen Gerät mit derselben Verbindung aufrufen und jedes eine synchronisierte Vorschau anzeigen lassen. All dies bietet Ihnen das perfekte Setup für Cross-Browser- und Geräte-Tests.
Und weil Sie dies zusätzlich zu Ihrem Task-Runner-Setup aufbauen, wird alles mit einem Zwei-Wörter-Befehl live geschaltet grunzen beginnen oder Schluck starten.
Das manuelle Ausrüsten neuer Projekte kann eine Art Schmerz sein. Es kann sehr zeitaufwändig sein, die gesamte Ordner- und Dateistruktur einzurichten und alle Dateien zu konfigurieren, damit sie zusammenarbeiten können.
Mit Hilfe der Befehlszeile können Sie jedoch in Sekundenschnelle alle Arten von Projekten ermitteln. Dies ist ideal, wenn Sie gängige Drittanbieter-Frameworks und Starter-Code wie Foundation, Bootstrap, HTML5 Boilerplate und Google Web Starter Kit verwenden möchten.
Mit den Methoden, die wir behandeln werden, haben Ihre neu eingerüsteten Projekte nicht nur den gesamten Code, den sie benötigen, sondern auch ihre Task-Runner vorkonfiguriert, sodass Dinge wie das automatische Kompilieren und Localhost-Vorschauen sofort einsatzbereit sind.
Wenn ja, dann sehen wir uns im ersten Tutorial!
Accentsconagua