Como usar o prepros para compilar automaticamente arquivos .SCSS

O prepros é um compilador que funciona em diversas linguagens, mas hoje gostaria de ensinar a utilizar o programa para vigiar, minificar e compilar seu arquivo .scss automaticamente, facilitando assim o desenvolvimento de sites ou aplicativos.

O programa em si é pago, mas possui um tempo ilimitado de trial, mostrando uma mensagem pedindo para o usuário comprar caso o mesmo se interesse, ficando a critério nosso escolher se desejamos então nos livrar da mensagem.

Para baixar o programa vá até o site da prepros e escolha a opção de baixar o trial ilimitado.

Após abrir o programa pela primeira vez, simplesmente arraste uma pasta que contenha o arquivo scss e o seu projeto. O próprio programa vai mostrar na aba principal a arvore de arquivos que você poderia vir a mexer. Nesse post vou mostrar como configurei um arquivo em uma pasta sass para minificar, compilar e minificar já para a pasta css um arquivo estilo.

Utilizando na prática: na imagem abaixo destaquei as três principais funções que você pode retirar do prepros.

  • OUTPUT PATH: após passar a pasta para o programa, procure por seu arquivo .scss e clique nele, após você escolher um arquivo com extensão compatível, você pode então escolher o seu destino, eu escolhi um arquivo css já existente. Após escolher o local, ao salvar o arquivo em um editor de textos, o arquivo será automaticamente compilado para o local escolhido.
  • Minify CSS: esse é meio obvio, mas ao escolher essa opção o css após compilação será automaticamente minificado. Vantagens da minificação são redução de tamanho de arquivo e velocidade. Você pode conferir diversos pontos de usuários tanto a favor como contra a minificação nesse post do stackoverflow.
  • Live reload: ao clicar no icone do mundo, o prepros abre o navegador com uma versão local do seu site, a grande e melhor vantagem disso é o live-reload, ao salvar no arquivo ele ja recarrega o navegador, deixando bem mais fluído o desenvolvimento.
Live Reload

Referências:

Conteúdo: site da site da prepros.
 Imagens: GIF utilizando o exemplo do próprio desenvolvedor, feito com a ferramenta LICECap