Aviso: este é um screencast sinuoso de nível intermediário no qual examinamos o código que alimenta o processo de construção de um site. Não escrevemos nenhum código.
Um “processo de construção” é tudo o que acontece entre o código que você escreve e o código que vai para um site ao vivo. Falamos antes sobre como usar o Grunt para isso. Sass é processado, ativos são combinados, minimização e otimização acontecem, etc. Existem inúmeras coisas que um processo de construção pode fazer por você.
Tenho trabalhado com Katie Kovalcin na construção de um novo site pessoal para ela. É uma experiência para nós dois em aprender novos processos e tentar coisas novas. Neste caso, estou usando Jekyll pela primeira vez e estou automatizando um sistema SVG pela primeira vez.
No momento do screencast, estou bem no meio de tudo, mas fiz o sistema de compilação funcionar perfeitamente, então achei que seria um bom momento para compartilhar isso. Sempre acho que é um bom momento para compartilhar - bem no momento em que algo clica para você.
Coisas acontecendo:
- Grunt executa todas as tarefas.
- O site está sendo construído com Jekyll. O que significa que processa os layouts e o conteúdo em páginas da web completas. Quando o conteúdo ou layout muda, Grunt executa a construção Jekyll.
- Jekyll também executa o servidor local.
- Sass é o pré-processador CSS. Quando um arquivo Sass é alterado, Grunt executa a complicação Sass. Em seguida, o Grunt executa o Autoprefixer no resultado. Em seguida, Grunt executa a construção do Jekyll novamente para garantir que todas as coisas novas sejam utilizáveis pelo site processado.
- O site usa um sistema SVG. Para ícones, mas também para o logotipo e sabe-se lá o que mais no final. Os arquivos SVG são mantidos todos separados em uma pasta “svg”. Quando qualquer um deles muda, Grunt executa a tarefa svgstore para processá-los todos juntos. Em seguida, o Grunt executa a construção do Jekyll para que todo o SVG atual esteja disponível no site.
- Como este é um repositório no GitHub, e as páginas do GitHub oferecem suporte ao Jekyll, podemos obter automaticamente uma versão hospedada ao vivo deste site. Também podemos apontar outro domínio neste site.