Para um de meus recentes projetos, decidi usar o Stylus. Estou acostumado a utilizar Sass, mas isso necessitaria adicionar Ruby ao nosso stack – Stylus é baseado no Node.js e, já que estou utilizando Node.js para outras tarefas, pensei em dar uma chance ao Stylus.

Já que estou bastante envolvido com o desenvolvimento frontend do projeto, ou estou corrigindo bugs ou criando novos recursos, que em ambos os casos depende de grandes edições de CSS. O problema que estou passando é que estou me esquecendo de reprocessar as folhas de estilo ao mudar de branches, então as páginas começam a parecer estranhas e eu começo a ter ataques cardíacos.

Ao ver como a minha memória é falha, procurei por uma solução automatizada para esse problema. O Stylus possui um recurso de “vigia”, mas eu achei lento e sou impaciente. Em seguida, tentei os hooks do git. Sempre ouvi sobre eles, mas nunca tinha perdido tempo com eles – um grande erro. Para resolver meu problema de pré-processamento ao alternar branches, criei um hook post-checkout. Na mosca!

O primeiro passo é preencher o arquivo chamado post-checkout (sem extensão) no diretório .git/hooks do projeto:

cd .git/hooks && touch post-checkout

Depois, rodar meu script de compilação. O script de compilação é um arquivo externo (está conectado ao nosso processo de build), então tudo que preciso fazer é rodá-lo:

#!/bin/sh
./scripts/compile-scripts

No caso de você querer ver meu script de compilação CSS, aqui está:

#! /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

Provavelmente não preciso dizer a você como os hooks do git são incríveis, mas, no caso de pré-processamento instantâneo de CSS, eles são uma mão na roda!

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em  http://davidwalsh.name/git-hooks