Wie Gulp Sass kompiliert

Gulp ist ein Automatisierungstool, mit dem Frontend-Entwickler allgemeine Aufgaben erledigen können:

1. Erstellen Sie einen Webserver.

2. Laden Sie den Browser automatisch neu

3. Verwenden Sie Präprozessoren wie Sass, LESS

4. Optimieren Sie Ressourcen, wie z. B. Komprimieren von CSS, JavaScript und Komprimieren von Bildern

Natürlich kann Gulp noch viel mehr. Wenn Sie verrückt genug sind, können Sie damit sogar einen statischen Seitengenerator erstellen. Schlucken ist wirklich mächtig, aber man muss lernen, es zu nutzen.

Dies ist der Hauptzweck dieses Artikels. Helfen Sie dabei, die grundlegende Verwendung von Gulp zu verstehen und Ihr großes Ziel, die Welt so schnell wie möglich zu vereinen, zu erreichen.

Was wir tun werden

Am Ende dieses Artikels haben Sie einen einfachen Arbeitsablauf:

Sass kompilieren

Darüber hinaus lernen Sie auch, mit einfachen Befehlsketten mehrere Aufgaben aufzurufen.

Gulp installieren

Sie müssen Node.js installieren, bevor Sie Gulp installieren.

Wenn Sie Node noch nicht installiert haben, können Sie es hier herunterladen.

Nach der Installation von Node.js verwenden Sie Terminal (Terminal, cmd unter Win), um Gulp mit dem folgenden Befehl zu installieren

$ sudo npm install gulp -g

Nur ​​Mac-Benutzer benötigen den Befehl sudo und kopieren Sie nicht das $-Zeichen, das ist nicht Ihr Ding.

npm install ist ein Befehl, der für die Installation über den Node Package Manager angegeben wird (npm hat Angst vor Haaren).

-g bedeutet globale Installation, sodass Sie den gulp-Befehl nur irgendwo auf Ihrem Computer verwenden können.

Mac-Benutzer benötigen Administratorrechte für die globale Installation, daher ist sudo erforderlich.

Als nächstes verwenden Sie Gulp, um das Projekt zu erstellen.

Erstellen Sie ein Gulp-Projekt

Zuerst erstellen wir einen neuen Projektordner und führen den Befehl npm init in diesem Verzeichnis aus:

$ npm init

Der Befehl npm init erstellt für Sie eine package.json-Datei, in der Informationen zu diesem Projekt gespeichert werden. Zum Beispiel die verschiedenen Abhängigkeiten, die Sie verwenden (hier hauptsächlich Plug-Ins) (der folgende Inhalt wird automatisch im Terminal angezeigt, füllen Sie ihn einfach hier beiläufig aus)

Nach der Erstellung , führen wir den folgenden Befehl aus:

$ npm install gulp --save-dev

Dieses Mal installieren wir Gulp lokal. Durch die Verwendung von --save-dev wird der Computer benachrichtigt, gulp-Abhängigkeiten in package.json hinzuzufügen.

Die Verzeichnisstruktur ist wie folgt

In dieser Struktur verwenden wir den App-Ordner als Entwicklungsverzeichnis ( alle Quellen Die Dateien werden hier abgelegt und der dist-Ordner wird zum Speichern von Inhalten in der Produktionsumgebung verwendet.

Sie können diese Dateien beliebig benennen, aber denken Sie bitte unbedingt an Ihre Verzeichnisstruktur. Jetzt erstellen wir gulpfile.js und geben es wie folgt ein.

Im Folgenden wird das gulp-sass-Plugin zum Kompilieren der Sass-Datei installiert:

1 Geben Sie die Befehlszeile unter der App ein:

　$ npm install gulp -sass --save-dev

Zu diesem Zeitpunkt aktualisiert die Datei package.json automatisch die abhängigen Pakete!
2. Fügen Sie das Plug-in in gulpfile.js ein

3. Informieren Sie gulp über die auszuführende Aufgabe, die Aufgabenaufgabe in gulpfile.js

Zu diesem Zeitpunkt führt die Befehlszeile

Gulp Sass

css

aus