Artikel

Vorbereitung

System

Folgende Punkte müssen auf dem Mac vorgenommen werden

Xcode installieren

Über den AppStore Xcode installieren
Xcode ausführen und Lizenzbedingungen zustimmen
Xcode schließen

PhpStorm

Alle folgenden Befehle können direkt im PhpStorm Terminal ausgeführt werden. Das ganze muss mit dem localadmin durchgeführt werden.

Ruby aktualisieren

Ruby ist auf MacOS vorinstalliert und muss evtl. aktualisiert werden.

$ sudo gem update --system

Compass installieren

Compass ist ein Sass-basiertes Stylesheet-Framework zum Modularisieren von CSS Projekten

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

Wenn keine Fehlermeldungen auftreten ist die Compass Installation damit abgeschlossen.

File Watcher einrichten

In PhpStorm die Preferences über den Schraubenschlüssel in der Menüleiste Öffnen (nicht File->Settings).
Oben Links in die Suche File Watcher eingeben / Alternativ: Tools -> File Watcher
Mit + einen neuen File Watcher erstellen und SCSS auswählen
- Wenn bereits Argumente und Pfade konfiguriert sind, diese entfernen
File Watcher konfigurieren
- Name: SCSS (Oder treffenden Namen wählen)
- Scope: Project Files
- Arguments: compile $ProjectFileDir$[/verzeichnis/zuProjekt] (wo die config.rb liegt)

Das reicht im Grunde aus um Den File Watcher zu verwenden. Wenn automatisch be jeder Anpassung die Dateien neu generiert werden sollen, muss die Option Immediate file synchronisation aktiviert werden.

Automatischer File-Upload generierter CSS-Dateien

Damit die Generierten Dateien automatisch hochgeladen werden, ist folgende Anpassung in PhpStorm nötig:

Upload external changes sorgt dafür das auch Dateien hochgeladen werden, die nicht vom User verändert wurden. Dazu macht es Sinn eine Warnung auszugeben, wenn Dateien überschrieben werden die sich auf dem Server verändert haben: Warn when uploading over newer file. Da es bei FTP Verbindungen sein kann das sich der Timestamp nicht aktualisieren lässt, ist Compare content die sicherere Lösung.