Share
Als Webdesigner gibt es drei Sprachen, mit denen Sie ziemlich sicher arbeiten können: CSS, HTML und JavaScript. In diesem Lernprogramm werden Sie die Befehlszeile nutzen, um Ihre Entwicklung mit diesen drei Sprachen leistungsfähiger und effizienter zu gestalten.
Sie erfahren, wie Sie die Befehlszeile verwenden, um:
Hinweis: Dieses Tutorial setzt voraus, dass Sie die vorherigen Tutorials dieser Serie bereits abgeschlossen haben. Wenn Sie dies nicht getan haben, ist es hilfreich, wenn Sie zurückgehen und diesen folgen, bevor Sie fortfahren.
Wenn Sie noch nie mit CSS-Präprozessoren gearbeitet haben, lassen Sie alles sofort fallen und probieren Sie es aus. Wenn Sie einen Präprozessor gefunden haben, der zu Ihrem Codierungsstil passt, werden Sie wahrscheinlich nie mehr in rohem CSS codieren.
Die drei Vorprozessoren, von denen allgemein angenommen wird, dass sie zur Auswahl stehen, sind Stylus, Sass / SCSS und LESS. Tuts + bietet eine große Auswahl an Tutorials und Kursen, in denen Sie lernen, wie man in der Syntax aller drei Vorprozessoren schreibt.
In diesem Tutorial erfahren Sie, wie Sie die Befehlszeile verwenden können, um Code für jede der drei zu kompilieren.
Jeder Präprozessor-Benutzer hat einen Favoriten, und meiner ist Stylus. Es verwendet eine minimale Syntax, die sehr schnell geschrieben werden kann, über eine leistungsstarke Funktionalität verfügt und von hervorragenden Drittanbieter-Bibliotheken wie Jeet und Kouto-Swiss unterstützt wird.
Sie können alles über Stylus unter http://stylus-lang.com/ nachlesen.
Führen Sie den folgenden Befehl aus, um Stylus global zu installieren, damit Sie ".styl" -Dateien überall kompilieren können:
[sudo] npm install stylus -g
Die einfachste Möglichkeit zum Kompilieren mit Stylus ist die Verwendung dieses einzeiligen Befehls:
Stift < example.styl > beispiel.css
Dieser Befehl kompiliert "example.styl" in "example.css" im selben Verzeichnis.
Um es niederzureißen, haben wir Stift um den Befehl zu starten. Dann benutzen wir eine < example.styl um die Eingabedatei des Stylus anzugeben, gefolgt von > beispiel.css um den Namen der CSS-Datei anzugeben, die erstellt werden soll.
Sie haben auch die Möglichkeit, diesem Befehl zusätzliche Flags hinzuzufügen, z. B. die --komprimieren kennzeichnen, um Leerzeichen aus der resultierenden CSS-Datei zu entfernen:
Stift - komprimieren < example.styl > beispiel.css
Als Alternative zum Kompilieren einer Datei können Sie alle Stylus-Dateien in einem Verzeichnis in CSS-Dateien in einem anderen Verzeichnis kompilieren. Um dies zu tun, nach dem Stift geben Sie den Quellordner an und verwenden Sie dann die --aus Flagge gefolgt vom Zielordner.
Um beispielsweise alle Stylus-Dateien aus einem Ordner mit dem Namen „source_files“ in „assets / css“ zu kompilieren, verwenden Sie:
stylus source_files --out assets / css
Hinweis: Der Ordner, in den Sie kompilieren, muss bereits vorhanden sein, bevor Sie den Befehl ausführen, da er fehlschlägt, wenn er den angegebenen Ordner nicht finden kann, in den CSS-Dateien ausgegeben werden sollen.
Es gibt verschiedene andere Optionen, die Sie nutzen können, wenn Sie Stylus über die Befehlszeile verwenden. Um alles über sie zu erfahren, besuchen Sie: http://stylus-lang.com/docs/executable.html
Sass ist wahrscheinlich der beliebteste Präprozessor zu diesem Zeitpunkt. Es ist unglaublich mächtig in dem, was Sie damit erreichen können, und hat eine sehr große und aktive Gemeinschaft. Es wird von bekannten Drittanbieter-Bibliotheken wie Compass, Bourbon und Susy unterstützt.
Weitere Informationen zu Sass finden Sie unter: http://sass-lang.com/
Sie haben zwei Möglichkeiten, um Sass auf Ihrem Computer zu kompilieren: Sie können entweder Ruby verwenden, um es zu handhaben, oder Sie können LibSass verwenden.
Sass wurde zuerst für die Verwendung mit Ruby entwickelt. Wenn Sie also nach 100% iger Vollständigkeit und Unterstützung für Funktionen suchen, ist dies die Option, die Sie wählen können. Wenn Sie beispielsweise Compass verwenden möchten, halten Sie sich am einfachsten an die Ruby-Kompilierung.
LibSass wurde als Alternative erstellt und eine der Optionen, die es zur Verfügung stellt, ist das Kompilieren von sass stattdessen über ein npm-Paket. Dieser Ansatz kompiliert Sass viel schneller und bringt eine Kompilierzeit von etwa 5 Sekunden durch Ruby auf weniger als eine halbe Sekunde durch LibSass. Möglicherweise stellen Sie jedoch fest, dass bestimmte Funktionen und der Code von Drittanbietern nicht unterstützt werden.
Was Sie wählen, hängt ganz von Ihren persönlichen Vorlieben ab, aber als Faustregel empfehle ich Ihnen, mit LibSass zu fahren, es sei denn, es gibt etwas Bestimmtes (wie Compass), für das Sie eine Ruby-Kompilierung benötigen.
Unabhängig von Ihrer Wahl behandeln wir beide, so dass Sie in beiden Ereignissen bereit sind.
Um Sass über Ruby zu kompilieren, muss zunächst Ruby auf Ihrem Computer installiert sein.
Wenn Sie auf einem Mac sind, haben Sie Glück, da Ruby bereits vorinstalliert ist, damit Sie nichts tun müssen.
Wenn Sie mit Windows arbeiten, besuchen Sie http://rubyinstaller.org/, laden Sie das dort installierte Installationsprogramm herunter und führen Sie es aus. Als Nächstes installieren Sie Sass, indem Sie diesen Befehl ausführen:
[sudo] gem install sass
Sass sollte automatisch heruntergeladen und für Sie installiert werden. Um zu überprüfen, ob die Installation erfolgreich war, führen Sie den Befehl aus:
sass -v
Die Versionsnummer und der Name Ihrer Sass-Installation sollten in Ihrem Terminal angezeigt werden:
Um eine Datei mit Ruby sass zu kompilieren, geben Sie einfach ein sass, gefolgt vom Namen der Eingabedatei, einem Leerzeichen und dem Namen, den Sie für Ihre kompilierte CSS-Datei haben möchten:
sass source_file.scss compiled_file.css
Ruby Sass verfügt auch über eine eingebaute "watch" -Funktion (wir werden später mehr darüber erfahren), die Ihre Dateien auf Änderungen überprüft und sie bei jedem Speichern automatisch neu kompiliert.
Fügen Sie dazu das hinzu --sehen Markieren Sie Ihren Befehl und trennen Sie dann die Namen der Quell- und der kompilierten Datei mit einem Doppelpunkt anstelle eines Leerzeichens:
sass --watch source_file.scss: compiled_file.css
Sie können statt einzelner Dateien auch ganze Verzeichnisse angeben, in die Sie schauen und ausgeben möchten:
sass --watch source / sass: assets / css
Sobald das Ansehen gestartet ist, sollten Sie in Ihrem Terminal Folgendes sehen:
Um alle Optionen zu erfahren, die über die Befehlszeile beim Ruby Sass-Lauf verfügbar sind:
sass --hilfe
Ein Auslesen der Befehlszeilen-Dokumente wird in Ihrem Terminal angezeigt:
Sie können dies verwenden --Hilfe Flag, um weitere Informationen zu jedem Befehl zu erhalten, den Sie verwenden. Geben Sie einfach den Namen des Befehls ein, gefolgt von --Hilfe und Sie erhalten in jedem Fall ähnliche Informationen wie oben.
Wenn Sie sich für LibSass entscheiden, können Sie mit der gleichen Methode beginnen, die Sie bereits in diesem Lernprogramm für die Installation von npm-Paketen verwendet haben.
LibSass selbst ist in C / C ++ geschrieben, es gibt jedoch verschiedene Implementierungen, darunter auch einige, die mit Node.js arbeiten. In unserem Fall verwenden wir das Paket node-sass.
Führen Sie den folgenden Befehl aus, um node-sass global zu installieren:
[sudo] npm install node-sass -g
So kompilieren Sie einen Dateityp Knoten-Sass gefolgt vom Namen der Eingabedatei und dem Namen, den Ihre kompilierte CSS-Datei haben soll:
node-sass source_file.scss compiled_file.css
Um das Verzeichnis zu steuern, wird Ihre CSS-Datei in add the kompiliert --Ausgabe Flag und Zielverzeichnis zwischen den Namen Ihrer Eingabe- und Ausgabedateien:
node-sass source_file.scss --output assets / css compiled_file.css
Wie Ruby Sass verwendet node-sass auch die --sehen Flag, um das automatische Kompilieren Ihrer Dateien bei Änderungen zu ermöglichen:
node-sass --watch source_file.scss compiled_file.scss
Sie können anstelle einzelner Dateien auch ganze Verzeichnisse angeben, die überwacht und ausgegeben werden sollen:
node-sass --watch source / sass / * --output assets / css
Wenn Sie node-sass zum Überwachen eines ganzen Verzeichnisses verwenden, müssen Sie unbedingt Folgendes angeben / * Am Ende geben Sie an, dass Sie alle Dateien darin angeben möchten.
Wenn Sie einen Watch-Prozess ausführen, können Sie ihn stoppen, indem Sie entweder
Der LESS-Präprozessor ist ebenfalls sehr beliebt und wahrscheinlich am bekanntesten für seinen Einsatz im Twitter-Bootstrap-Framework. LESS ist ein großartiger erster Präprozessor, mit dem Sie arbeiten können, da er dem Schreiben in direktem CSS sehr ähnlich ist.
Weitere Informationen zu LESS finden Sie unter: http://lesscss.org/
Führen Sie den folgenden Befehl aus, um LESS global zu installieren, damit Sie ".less" -Dateien überall kompilieren können:
[sudo] npm install less -g
Öffnen Sie ein Terminal in dem Ordner, in dem sich die zu kompilierende LESS-Datei befindet, und verwenden Sie den Befehl lessc gefolgt vom Namen der Datei, a > Symbol, dann den Namen, den Ihre kompilierte CSS-Datei haben soll:
lessc source_file.less> compiled_file.css
Autoprefixer ist ein npm-Paket, das bei CanIUse.com nach aktuellen Informationen sucht, welche CSS-Eigenschaften Herstellerpräfixe benötigen und welche nicht. Das Hinzufügen der erforderlichen Herstellerpräfixe in Ihren Code erfolgt dann automatisch.
Das kann sein unglaublich Dies ist hilfreich, da Sie nicht ständig Browser-Updates überwachen, und Sie können leicht Browser-Präfixe finden, die Sie nicht mehr wirklich benötigen. Es bedeutet auch, dass Sie Ihr gesamtes CSS schreiben können, ohne über Präfixe nachdenken zu müssen, und lassen Sie sich von Autoprefixer für Sie sorgen.
Zum Beispiel wird der Autoprefixer diesen Code ändern:
a display: flex;
… das sehr gut finden:
ein display: -webkit-box; Anzeige: -webkit-flex; Anzeige: -ms-flexbox; Anzeige: Flex;
Weitere Informationen zu Autoprefixer finden Sie unter: https://www.npmjs.com/package/autoprefixer
Installieren Sie Autoprefixer global mit:
[sudo] npm Install Autoprefixer -g
Um eine CSS-Datei automatisch zu korrigieren, verwenden Sie den folgenden Befehl:
Autoprefixer style.css
Im Gegensatz zum Kompilieren einer Präprozessor-Datei wird standardmäßig keine zweite Datei erstellt. Die Datei, auf die Sie abzielen, wird aktualisiert und die korrekten Präfixe werden direkt hinzugefügt.
Wenn du tun Möchten Sie, dass Autoprefixer eine zweite, separate Datei generiert, fügen Sie das hinzu --Ausgabe flag gefolgt von einem Namen für Ihre CSS-Präfix-Datei:
Autoprefixer unprefixed.css --output prefixed.css
Sie möchten immer, dass das auf Ihren Websites bereitgestellte CSS auf die kleinstmögliche Größe reduziert wird. Um dies zu erreichen, können Sie Optimierungstechniken verwenden:
Stylus, Ruby Sass und Node-Sass können das CSS während der Kompilierung komprimieren.
Fügen Sie in Stylus die --komprimieren Flagge:
Stift - komprimieren < source_file.scss > compiled_file.css
In Ruby Sass gehören die --Stil Flagge, gefolgt von komprimiert:
sass source_file.scss compiled_file.css --style komprimiert
Fügen Sie in node-sass das hinzu --Ausgabestil Flagge gefolgt von komprimiert:
node-sass - Ausgabe-Stil komprimierte Quelldatei.scss compiled_file.css
Wenn Sie keine CSS-Präprozessoren verwenden oder nur eine maximale Codeoptimierung wünschen, können Sie das clean-css-Paket verwenden, das Ihre CSS-Dateien gründlicheren Komprimierungsprozessen unterzieht.
Bei regulären Komprimierungsprozessen werden normalerweise Leerzeichen und Kommentare aus Ihrem CSS entfernt. Das clean-css-Paket dagegen kann auch Folgendes tun:
Das Zusammenführen von duplizierten Selektoren kann praktisch sein, wenn Sie beispielsweise das gesamte Layout für eine bestimmte Klasse zunächst in einer Datei "layout.css" haben möchten, während die Farbe derselben Klasse anfänglich in einer "colors.css" -Datei enthalten ist..
Das Runden von Zahlen ist ideal, wenn Sie eine Präprozessor-Funktion verwendet haben, um einen Wert in Rem-Einheiten umzuwandeln und am Ende etwa 2.3649858573rem zu verwenden. Mit clean-css würde diese Zahl auf zwei Dezimalstellen gerundet werden, was zu einem viel saubereren 2.36rem-Wert führt.
Weitere Informationen zu clean-css finden Sie unter: https://github.com/jakubpawlowicz/clean-css
Installieren Sie clean-css global mit dem Befehl:
[sudo] npm install clean-css -g
So reinigen Sie eine CSS-Datei:
cleancss style.css
Hinweis: Auch wenn der Paketname „clean-css“ einen Bindestrich enthält, müssen Sie ihn unbedingt verwenden cleancss ohne einen Bindestrich, um Ihre Befehle zu starten.
Um einen neuen Dateinamen für clean-css anzugeben, verwenden Sie die -O flag gefolgt vom neuen Dateinamen vor dem Namen der Datei, auf die Sie abzielen:
cleancss -o clean.css style.css
Für clean-css stehen verschiedene weitere Befehlsoptionen zur Verfügung, die Sie unter lesen können: So verwenden Sie die Clean CSS-CLI.
Jade ist eine erstaunliche Sprache, die in HTML kompiliert wird und die es Ihnen ermöglicht, Ihren Code sowohl in Kurzform zu schreiben, so dass die Entwicklung viel schneller ist, als auch die Erstellung eigener Templatesysteme, sodass Sie sich selbst beim Umschreiben von Code sparen können.
Weitere Informationen zu Jade finden Sie unter: https://www.npmjs.com/package/jade
Um Jade global zu installieren, führen Sie den Befehl aus:
[sudo] npm install jade -g
Jade, erstellt von derselben Person wie Stylus, verwendet dieselbe grundlegende Befehlssyntax von < und > Zeichen zum Kompilieren einer Datei:
Jade < index.jade > index.html
Dieser Befehl kompiliert "index.jade" in "index.html" im selben Verzeichnis.
Um alle Jade-Dateien in einem bestimmten Verzeichnis zu kompilieren, verwenden Sie:
Jade dir_name
Zum Festlegen des Verzeichnisses, in das Ihre HTML-Dateien geschrieben werden sollen, um das Verzeichnis zu platzieren --aus Flag zwischen dem Namen der Eingabe- und Ausgabeverzeichnisse:
jade src_dir --out html_dir
Jade verwenden sehen Funktion zum automatischen Übersetzen beim Speichern, übergeben Sie die --sehen Fahne direkt nach dem Jade-Befehl.
Für einzelne Dateien:
Jade - Uhr < index.jade > index.html
Oder für vollständige Verzeichnisse:
jade --watch dir_name
jade --watch dir_name --out html_dir
So wie wir die CSS-Dateien optimieren möchten, die wir bereitstellen, möchten wir auch unsere JavaScript-Dateien auf möglichst effiziente Weise bereitstellen.
Es ist für uns üblich, dass mehrere JS-Dateien in unsere Projekte aufgenommen werden, z. B. Modernizr, jQuery und unseren eigenen benutzerdefinierten Code. Wir möchten jedoch auch die Anzahl der HTTP-Anforderungen reduzieren, die unsere Websites stellen. Zusätzlich möchten wir sicherstellen, dass die Ladezeit für unser JavaScript extrem schnell ist.
Beide Probleme lassen sich am besten lösen, indem Sie unsere JavaScript-Dateien gleichzeitig in einer einzigen Datei verketten. Dies bedeutet, dass wir nur eine http-Anforderung benötigen, um sie zu laden, und die resultierende Datei minimieren, sodass sie die kleinstmögliche Größe hat.
Wir werden das Paket UglifyJS verwenden, um diesen Prozess zu erledigen.
So installieren Sie uglify-js global:
[sudo] npm install uglify-js -g
Um zwei JavaScript-Dateien zu kombinieren und Leerzeichen und Kommentare aus der resultierenden Datei zu entfernen, verwenden Sie die uglifyjs Befehl gefolgt von den Namen aller Quelldateien mit Leerzeichen dazwischen. Danach gehören die --Ausgabe flag und den Namen, den Ihre neue kombinierte und minimierte Datei haben soll:
uglifyjs input1.js input2.js --output input.min.js
Neben dem standardmäßigen Entfernen von Leerzeichen und Kommentaren können Sie auch eine Komprimierung hinzufügen, durch die der Code geändert wird, um die Größe zu reduzieren. Fügen Sie dazu das hinzu --komprimieren Flag am Ende des Befehls:
uglifyjs input1.js input2.js --output input.min.js --compress
Eine weitere verfügbare Optimierungsoption besteht darin, den Code zu "manipulieren", wodurch beispielsweise Variablen-, Funktions- und Argumentnamen bis auf einzelne Zeichen reduziert werden. Um diese Option zu verwenden, fügen Sie das hinzu --Mangel Flag am Ende des Befehls:
uglifyjs input1.js input2.js --output input.min.js --mangle
Sie können auch die Komprimierung und das Mangeln verwenden, indem Sie beide Flags übergeben:
uglifyjs input1.js input2.js --output input.min.js --mangle --compress
Weitere Informationen zu den Befehlen, die Sie mit UglifyJS ausführen können, finden Sie unter: https://www.npmjs.com/package/uglify-js
Wenn Sie Skripte von Drittanbietern wie jQuery, Modernizr usw. kombinieren und / oder minimieren, stellen Sie sicher, dass Sie die vollständig erweiterten Versionen dieser Dateien verwenden. Es ist im Allgemeinen eine schlechte Idee, bereits minimierte Dateien erneut zu minimieren, da deren Funktionalität beeinträchtigt werden kann.
Dateien, die bereits minimiert wurden, können Sie identifizieren, da sie normalerweise der Namenskonvention von "name.min.js" folgen, während die erweiterte Version der Datei "name.js" ist..
Jetzt wissen Sie, wie Sie mit verschiedenen Befehlen unglaublich nützliche Aufgaben erledigen können. Was wäre, wenn Sie alle Aufgaben, die Ihr Projekt benötigt, gleichzeitig mit einem einzigen Befehl erledigen können??
Im nächsten Lernprogramm erfahren Sie, wie Sie genau dies tun können. Verwenden Sie Task-Läufer, um alle Aufgaben zu konfigurieren, die Ihr Projekt benötigt, damit Sie alle Kompilierungen, automatischen Korrekturen, Kombinierungen und Optimierungen auf einmal und in wenigen Sekunden erledigen können.
Wir sehen uns im nächsten Tutorial!
Accentsconagua