Einführung in Gulp 4

Gulp ist ein Tool zur Automatisierung häufig auftretender Aufgaben bei der Website-Entwicklung: Minimierung von CSS- und JavaScript-Dateien, Zusammenführung mehrerer Dateien zu einer, Konvertierung von LESS und SASS in CSS, Konvertierung der Sprache TypeScript in JavaScript und ähnlicher Aufgaben.

Das Funktionsprinzip ist wie folgt: Für das Gulp-System werden Aufgaben geschrieben, und Gulp führt diese Aufgaben in einer festgelegten Reihenfolge aus.

Lassen Sie uns Gulp installieren. Dazu muss in der Befehlszeile folgender Befehl ausgeführt werden:

npm install --global gulp-cli

Jetzt erstellen wir ein Projekt, in dem Gulp verwendet wird. Dazu erstellen wir im Projektordner die folgende Dateistruktur:

/src/
- /js/
  - script1.js
  - script2.js
  - script3.js
- /css/
  - styles1.css
  - styles2.css
- /img/
  - image1.png
  - image2.png
  - image3.png
- index.html

Auch muss der Projektordner eine package.json Datei enthalten. Danach kann Gulp im Projekt installiert werden. Dazu muss in der Befehlszeile, im Projektordner, folgender Befehl ausgeführt werden:

npm install --save-dev gulp

Erstellen Sie ein Projekt und installieren Sie Gulp darin.