Pro jeden z mých nedávných projektů jsem se rozhodl použít Stylus. Jsem zvyklý používat Sass, ale to by vyžadovalo přidání Ruby do našeho zásobníku – Stylus je založen na Node.js, a protože Node.js již používám pro několik dalších úkolů, napadlo mě dát Stylus Snaž se. Vzhledem k tomu, že intenzivně vyvíjím front-end projektu, buď opravuji chyby, nebo vytvářím nové funkce, což vše vyžaduje náročné úpravy CSS. Problém, na který narážím, je ten, že zapomínám znovu zpracovat šablony stylů, když přepínám větve, takže stránky začnou vypadat divně a já začnu mít infarkty.
Vzhledem k tomu, že moje paměť je vadná, hledal jsem automatické řešení tohoto problému. Stylus má funkci „sledování“, ale zjistil jsem, že je pomalý a jsem netrpělivý. Dále jsem se obrátil na git hooks. Vždycky jsem o nich slyšel, ale nikdy jsem s nimi nestrávil moc času – velká chyba. Abych vyřešil přepínání větví, preprocesor blues, vytvořil jsem háček po pokladně. Prásk!
Prvním krokem je umístění souboru s názvem post-checkout (bez přípony) v projektu .git/hooks adresář:
cd .git/hooks && touch post-checkout
Další na řadě je spuštění mého kompilačního skriptu. Kompilační skript je externí soubor (je připojen k našemu procesu sestavení), takže vše, co musím udělat, je spustit:
#!/bin/sh ./scripts/compile-scripts
V případě, že chcete vidět můj kompilační skript CSS, zde je:
#!/bin/sh BASEDIR=$(dirname $0) CSSDIR=$BASEDIR/../media/redesign/css/ if [ ! -d "$CSSDIR" ]; then mkdir $BASEDIR/../media/redesign/css/ fi for file in main print wiki demo-studio profile search zones home do stylus $BASEDIR/../media/redesign/stylus/$file.styl --out $BASEDIR/../media/redesign/css --compress done
Asi vám nemusím říkat, jak úžasné jsou git hooks, ale v případě okamžitého předzpracování CSS jsou git hooks velkou pomocí!