Gulp ist ein flussbasiertes Code-Konstruktionstool im Front-End-Entwicklungsprozess. Es ist ein automatischer Task-Runner, der nicht nur Website-Ressourcen optimiert, sondern auch das Testen, Überprüfen, Zusammenführen, Komprimieren und Formatieren automatisch durchführen kann des Front-End-Codes, aktualisieren Sie den Browser automatisch, generieren Sie Bereitstellungsdateien und überwachen Sie die Dateien, um die angegebenen Schritte nach Änderungen zu wiederholen. Damit können wir nicht nur problemlos Code schreiben, sondern auch unsere Arbeitseffizienz erheblich verbessern.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, NodeJS Version 16, DELL G3-Computer.
1. Was ist Schlucken?
Gulp ist ein flussbasiertes Code-Konstruktionstool im Front-End-Entwicklungsprozess. Es ist ein Tool zum Erstellen automatisierter Projekte. Es kann nicht nur Website-Ressourcen optimieren, sondern auch viele sich wiederholende Aufgaben während des Entwicklungsprozesses automatisch erledigen Mit diesen Tools können Sie nicht nur problemlos Code schreiben, sondern auch unsere Arbeitseffizienz erheblich verbessern.
Gulp ist ein automatischer Task-Runner, der auf Nodejs basiert. Er kann das Testen, Überprüfen, Zusammenführen, Komprimieren und Formatieren von Front-End-Code, die automatische Browseraktualisierung und die Generierung von Bereitstellungsdateien automatisch abschließen und Dateien überwachen, um die angegebenen Schritte nach Änderungen zu wiederholen.
2. Was ist Flow?
Fließen, fließen, Dateien mit Flüssen vergleichen, dann fließt ein Fluss heraus und ein anderer Fluss hinein. So arbeitet gulp mit Dateiströmen. Die Ausgabe einer Operation wird wie folgt als Eingabe einer anderen Operation verwendet
Diese Operation ähnelt in gewisser Weise der Kettenoperation von jQuery: $("").html("gg").css({}).parent().find("a").......; Bei Verwendung von Streams , gulp entfernt Zwischendateien und schreibt nur die endgültige Ausgabe auf die Festplatte, wodurch der gesamte Prozess schneller wird.
3. Installation von Gulp
Gulp basiert auf der Knotenumgebung. Stellen Sie zunächst sicher, dass der Knoten installiert ist.
Nach der Knoteninstallation wird auch npm [(node package manager) nodejs package manager, der für die Knoten-Plug-in-Verwaltung (einschließlich Installation, Deinstallation, Abhängigkeitsverwaltung usw.) verwendet wird] automatisch installiert.
Da das npm-Installations-Plug-in von einem fremden Server heruntergeladen wird, wird es stark vom Netzwerk beeinflusst und kann zu Anomalien führen. Daher ist es am besten, das von Taobao bereitgestellte cnpm zu verwenden, um das Knoten-Plug-in zu installieren.
cnpm installieren: http://npm.taobao.org/
Überprüfen Sie nach der Installation die cnpm-Version, um sicherzustellen, dass die Installation erfolgreich war
Als nächstes können Sie gulp zunächst global installieren: cnpm install -g gulp
Gehen Sie dann zum Desktop demo/bbs2.0/src, rufen Sie die Bash-Umgebung auf und installieren Sie gulp mit cnpm install gulp im aktuellen Verzeichnis.
Nach erfolgreicher Installation wird der Ordner node_modules angezeigt. Anschließend wird package.json über cnpm init erstellt (Knotenprojektkonfigurationsdatei: Da das Knoten-Plug-In-Paket relativ groß ist, ist die Versionsverwaltung nicht enthalten. Schreiben Sie die Konfigurationsinformationen in das Paket .json und zur Versionsverwaltung hinzufügen und andere Entwickler können es entsprechend herunterladen)
Geben Sie den gesamten Pfad ein und die Datei package.json wird im aktuellen Ordner generiert. Wenn Sie zu diesem Zeitpunkt versuchen, gulp zu verwenden, wird ein Fehler gemeldet.
Laut Fehlermeldung müssen wir eine gulpfile.js-Datei erstellen
Dann laufen Sie schlucken
Sie werden feststellen, dass das von uns benötigte „OK“ gedruckt ist und Gulp hier grundsätzlich normal funktionieren kann.
4. Verwendung häufig verwendeter Plug-Ins in Gulp
1) Zusammengeführte Dateien komprimieren
Erstellen Sie eine neue index.html-Datei
Erstellen Sie zwei neue js-Dateien im js-Verzeichnis
Bearbeiten Sie die Gulpfile-Datei. wie folgt:
Da wir zwei Plug-Ins verwenden, gulp-uglify und gulp-concat, müssen wir diese beiden Plug-Ins zunächst im aktuellen Verzeichnis installieren.
Verwenden Sie bei der Installation des Plug-Ins --save-dev, um es zu package.json hinzuzufügen. Wir können überprüfen, ob die Datei erfolgreich in package.json geschrieben wurde.
OK, ja, dann fahren Sie mit der Installation von gulp-concat im Verzeichnis fort. Nachdem die Installation abgeschlossen ist, klicken wir auf node_modules und stellen fest, dass das Plug-in erfolgreich installiert wurde
OK, wenn kein Fehler gemeldet wird, bedeutet dies, dass der Vorgang erfolgreich war. Überprüfen Sie als Nächstes die Datei und stellen Sie fest, dass sich unter src alle.min.js-Dateien befinden, die wir komprimieren und zusammenführen möchten.
2) Schluck-Sass
Um Sass zu installieren, müssen Sie zuerst Ruby installieren und das Sass-Tutorial aufrufen
Klicken Sie auf „Installieren“ und Sie erhalten Anweisungen zur Installation von Sass und Ruby.
Nachdem Ruby erfolgreich installiert wurde, überprüfen Sie die Ruby-Version
Nach dem Erfolg installieren Sie Sass über Gem
Wenn Sie den Kompass verwenden müssen (die Beziehung zwischen Kompass und Sass entspricht jQuery und js), installieren Sie übrigens den Kompass.
Hier ist zu beachten, dass ein Problem mit der Gem-Quelle vorliegt, das dazu führt, dass die Installation fehlschlägt: Es wird ein Fehler gemeldet: SSL_connect return=1 errno=0 state=SSLv3 read server Certificate B: c ertificate verify failed . Sie können die Gem-Quelle in https://ruby.taobao.org/ ändern. Wenn es immer noch nicht funktioniert, ändern Sie es in http://gems.ruby-china.org/ ein Charakterproblem.
Als nächstes verwenden Sie Compass Create, um ein Sass-Projekt zu erstellen
Nach erfolgreicher Erstellung werden automatisch drei Dateien generiert: sass, stylesheets und config.rb.
Öffnen Sie eine beliebige Datei in Sass und bearbeiten Sie sie
Bearbeiten Sie dann die gulpfile
Installieren Sie dann gulp-sass und gulp-compass im aktuellen Verzeichnis
Überprüfen Sie nach dem Start von gulp die entsprechenden Dateien in den Stylesheets
Ok, Sass wurde erfolgreich in CSS kompiliert
3) Komprimieren Sie CSS mit gulp-minify-css
Nach dem Start Schluck
4) Verwenden Sie gulp-load-plugins, um uns beim Laden von Plugins zu helfen
Das Plug-in gulp-load-plugins kann die gulp-Plug-ins automatisch für Sie in die Datei package.json laden.
Wir müssen nur require('gulp-load-plugins')(); in gulpfile verwenden.
Benutzen Sie einfach das Plugin.** unten (mehrere Wörter werden in Kamel-Schreibweise benannt)
5) gulp-imagemin und imagemin-pngquant komprimieren Bilder
6) gulp-livereload zum automatischen Aktualisieren von Webseiten
Installieren Sie zuerst gulp-livereload: cnpm install gulp gulp-livereload, hier sind die Spalten komprimiertes HTML und kompiliertes und komprimiertes Sass.
Dann im Schluckfile
Um erfolgreich keine Aktualisierung zu erreichen
1. Sie benötigen auch die Unterstützung des Chrome-Plug-Ins Livereload, also gehen Sie über die Wand.
2. Öffnen Sie die Webseite in der Serverumgebung