Grunt mit Compass Support auf OSX

Für ein Kundenprojekt welches wir von einer anderen Agentur übernommen haben, war als Tech-Stack Grunt und Compass im Einsatz.

Starten von Grunt

Grunt lief und wurde in den watch-Modus versetzt. Bei der Kompilierung gab es zunächst die folgenden Hinweise:

Running "compass:dev" (compass) task
Warning: not found: compass Used --force, continuing.

Die JavaScript Dateien wurden erfolgreich erstellt. Die CSS Dateien hingehen nicht.

Bis wir darauf gekommen sind, das Compass zunächst installiert werden musste vergingen einige Anläufe.

Installation von Compass

Der erste Gedanke war es, Compass über NPM zu installieren. Allerdings hatte dies keinerlei Auswirkung auf die oben genannte Warnung.

Auf der Website von Compass wurde die Installation über gem (die Ruby Paketverwaltung) beschrieben.

Leider war die dort beschriebene Installation sudo gem install compass nicht komplikationsfrei:

You don't have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

Das von OSX standardmäßig installierte Ruby erlaube es uns nicht das Paket zu installieren.

Nach einigen Anläufen haben wir allerdings eine Lösung gefunden, welche wir an dieser Stelle teilen möchten:

System Vorraussetzung

Anleitung

Schritt 1: Installiere ruby

brew install ruby

Schritt 2: Shell auf neue Ruby Version anpassen

Füge das neue Ruby dem PATH hinzu. Je nach verwenderter Shell muss die folgende Zeile in der Datei ~/.bash_profile oder ~/.zshrc hinzugefügt werden:

export PATH="/usr/local/opt/ruby/bin:$PATH"

Schritt 3: Installiere compass

sudo gem install -n /usr/local/bin compass

Hinweis

Wir empfehlen den Einsatz von Webpack anstatt Grunt und Compass.