Compass használata PhpStormmal

Szóval ott hagytam abba, hogy van ez a remek PhpStorm szerkesztő, illetve használok Compasst a kinézet könnyebb és gyorsabb fejleszthetőségéért. A PhpStorm 6.0 óta rendelkezik egy beépített File Watchers kiegészítővel, ezzel többek közt a SASS fájlok (erre épül a Compass) fordíthatóak le CSS fájlokká. Egyenként. A hetes PhpStorm fejlesztésekor belekerült a Compass támogatás is, projektenként egy Compass beállításokat tartalmazó config.rb fájlt ádhatunk meg, ez viszont több kinézetet tartalmazó oldalnál kevés lehet, az angolomért pedig bocsi.
Szóval ilyenkor szokott az következni, hogy elindítok egyszerre több „compass watch” példányt (lehetőleg screenben, vagy más terminál többszörözőben), melyek a forrásfájlok változásakor automatikusan lefordítják a kódot. Régóta gondolkozom már a probléma jobb megoldásán, mígnem Dávid Andor felnyitotta a szemem és elárulta a varázslatot, amelyet alaposan dokumentálva megosztok most veletek.

Első lépésként a beállítások ablakban a projekt beállításainál hozzáadtam egy új scope-ot, érdemes könnyen felismerhető nevet adni neki, én a kinézet azonosítóját szoktam választani.

Új scope hozzáadása.

A scope elnevezése után kiválasztottam a kinézethez tartozó fájlokat. A példában ez a sites/all/themes/compass_teszt alatt található, a hozzá tartozó SASS fájlok a sass alkönyvtárában helyezkednek el. Az „Include Recursively” gombbal az alkönyvtárakat is hozzáadja, a mintában viszont megadtam, hogy csak az .scss kiterjesztésű fájlokat válassza ki.

Scope beállítása.

A scope befejezése után kell egy „File Watcher” is, ami szintén a projekt beállításainál található. Nem SASS, nem SCSS, hanem egyedi.

File watcher hozzáadása.

A file watchert szintén el kell nevezni (én itt is a kinézet azonosítóját használom). A „Immediate file synchronization” opciónál kiveszem a pipát, mert nem szeretném a fájlok módosításánál futtatni a Compass fordítást, elég mentésnél is. A „File type” vicces dolog, ugyanis alapból „UNKNOWN” van kiválasztva, amivel nem működik, érdemes helyette az „Any” opciót beállítani. A scope-nál kiválasztottam a korábban létrehozott scope-ot (ami a megfelelő fájlokat választja ki), a futtatandó program „compass”, az argumentje pedig „compile”. „Working directory” azt a könyvtárat adja meg, ahol a parancsot futtatni kell. Sajnos itt nem választható ki a létrehozott scope, viszont használható a $ProjectFileDir$ konstans, ami a projektünk főkönyvtárát jelenti, érdemes ahhoz viszonyítva megadni a kinézet kódját tartalmazó könyvtárat.

File watcher beállítása.

Ha ezzel megvagyunk, csak meg kell nyitni a kinézethez tartozó SASS forrásfájlokat. Ilyenkor rá fog kérdezni, hogy lefordítsa-e külön Compass nélkül, köszönöm, nem kérem.

Ne fordítsa le a külön forrásfájlt.

A történet ennyi, ha nem működik megfelelően, akkor le szoktam ellenőrizni, hogy a beállítások „File Watchers” oldalán be van-e kapcsolva a watcher, illetve annak a beállításainál a „Show console” és a „Create output from stdout” segít még a hibakeresésben.