Cookies (~ Keks oder Plätzchen / Datenpaket) erleichtern die Bereitstellung der Inhalte dieser Website und ganz ehrlich! - Sie helfen auch dabei die Seite funktionaler und schöner zu machen. Mit der weiteren Nutzung dieser Website erklärst Du Dich damit einverstanden, dass die Seite einige wenige Cookies verwendet. Datenschutzerklärung Fenster schließen

websitewerker.de kassel

9. September 2019 - von Jens in Linux, OpenSource, Webentwicklung
node.js – Gulp SASS & CLEAN-CSS unter Linux

Node.js und das Modul Gulp können bei Arbeiten an einer Website praktische Helfer sein. Wenn man beispielsweise bereits mit SASS arbeitet und nicht die integrierten Compiler, wie etwa von Dreamweaver CC nutzen will, kann in wenigen Schritten Node.js und Gulp auf dem Testserver (oder lokal) installieren. Was macht Gulp? Gulp ist ein sog. Task-Runner od. streaming build system. So können etwas komplexe Datenstrukturen von CSS und JavaScript automatisiert zusammengefasst, minifiziert und in HTML eingebunden werden.

Auf welche Umgebung bezieht sich dieser Beitrag?

  • OpenSUSE Leap 15.1
  • NodeJS 10.16.0
  • Gulp 4.0.2
  • Gulp CLI 2.2.0

Was brauchen wir dazu?

  • Node.js (hier in der Version 10.16.0)
  • Die Node Module
    • gulp (hier in der Version 4.0.2)
    • gulp-sass
    • gulp-clean-css
    • gulp-rename
    • gulp-watch
  • Gulp CLI (hier in der Version 2.2.0)

Eines Vorweg. Im Gegensatz zu der Vorgängerversion von Gulp hat sich einiges geändert. Insbesondere die Art, wie ein Task abgearbeitet wird. Hier lohnt sich ein Blick ins Netz um die Änderungen zu berücksichtigen.

Was soll gemacht werden?

  • SCSS Dateien sollen gesammelt und in eine CSS Datei kompiliert werden
  • Die CSS Datei soll für die finale Verwendung minifiziert werden

Welche Verzeichnisse werden gebraucht?

  • Ein Projektverzeichnis
  • Ein Verzeichnis „sass“ für die SASS Quelldateien
  • Ein Verzeichnis „css“ für die komiplierte CSS Datei
  • Ein Verzeichnis „dist“ für die finale, minifizierte CSS Version

Sind Node.js und die notwendigen Gulp-Module installiert kann die Datei „gulpfile.js“ direkt über die Kommandozeile ausgeführt werden. Zusätzlich werden im default-Task Änderungen in den „sass“ und „css“ Verzeichnissen beobachtet. Ändert sich eine Datei wird die entsprechende Funktion aufgerufen und zurück an den default-Task gegeben.

Zunächst wechselt man in das Projektverzeichnis. Wenn Gulp global installiert wurde, reicht das Kommando gulp aus um die Datei gulpfile.js zu starten.

Die Datei gulpfile.js

 

Weitere Infos:

Wer Node.js nicht über einen Paketmanager installiert und/oder unter Windows nutzen will kann sich die aktuelle LTS Version auf nodejs.org herunterladen:

Nützliche Quellen im Netz:


Diese Seite unterstützen?

Wenn dir dieser Beitrag geholfen hat, würde ich mich über ein kleines Dankeschön freuen.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Vielen Dank an Wordpress für diese hammermäßige Software!