Que saudade que eu estava de falar do nosso querido, robusto e fascinante Laravel Framework! Bem, vamos cortar o deleite por aqui e nos focar no que interessa: resolvi escrever este post pois, observei que muitos desenvolvedores estão fazendo mal uso dos diretórios /public/js e /public/css, o buraco é bem mais embaixo, porém, neste post vamos nos limitar a estes dois diretórios e sua forma de uso.

Pré-requisitos

No tópico “Dicas” descrevo orientações quanto a instalação dos requisitos listados abaixo:

• Interpretador PHP;
• Composer; e
• Node.js (com NPM ou Yarn).

Dicas

A instalação dos componentes acima é bem simples, seja no Windows, Linux ou MacOS.

Obs: gostaria de deixar claro que para rodar o Laravel (na verdade qualquer aplicação PHP) em ambientes de desenvolvimento, não precisamos do Apache ou Nginx, o PHP possui um servidor web embarcado que atende perfeitamente a essa necessidade encontrada durante as fases de desenvolvimento.

Caso precise de ajuda para instalar o PHP ou Composer, assista a este vídeo que preparei algum tempo atrás: https://youtu.be/zOAPiK1xg8Y. Recomendo que instale a última versão estável do PHP, os passos para instalação são os mesmos descrito no vídeo mencionado acima.

Já para o Node.js, recomendo que faça a instalação via NVM (Node Version Manager), uma abordagem inteligente que te dará flexibilidade ao permitir trabalhar com múltiplas versões do Node. Calma, o processo é bem simples, porém, para te ajudar eu preparei este tutorial: http://fabiojanio.com/2019/08/28/nvm-gerencie-multiplas-instalacoes-do-node-js/

O começo de tudo

Vamos lá, se você chegou até aqui estou pressupondo que você:

• Já instalou o PHP, Composer, Node.js, NPM ou Yarn; e
• Possui ao menos noções básicas no desenvolvimento com Laravel.

Por conta do que foi dito acima, não irei descrever os passos para instalação das ferramentas supracitadas, uma vez que o objetivo central deste post é demonstrar como lidar com arquivos scss/sass e js dentro da estrutura do Laravel Framework, de modo a não manipular diretamente os diretórios /public/css/* e /public/js/*, o que é considerada uma prática ruim.

Partiu Laravel

Se você já utilizou o Composer para instalar o Laravel, bem, do contrário permita-me te ajudar via Docker:

docker run --rm -v $(pwd):/app fabiojanio/php composer create-project --prefer-dist laravel/laravel nome-do-seu-app-aqui

Como premissa básica você precisa ter o Docker instalado para poder executar a instrução acima, ou então fazer a instalação de forma tradicional como sempre fez. Em resumo, a instrução acima irá criar no diretório atual um novo diretório “nome-do-seu-app-aqui” com a instalação do Laravel.

Para executar o Laravel você pode seguir sua abordagem tradicional, porém, se novamente me permite te ajudar, utilize essa instrução:

docker run --rm -v $(pwd):/app -d -p 80:80 --name nome-do-seu-app-aqui fabiojanio/php php -S 0.0.0.0:80 -t public

Em resumo, estamos criando um novo container temporário e iniciando o servidor embarcado do PHP na porta 80. Agora é só chamar http://localhost no navegador :)

Pré-processar SASS/SCSS e JS

Vamos começar instalando as dependências do Node.js:

npm i

Pronto. Agora podemos pré-compilar! Uuuhulll! Vamos fazer um teste simples. Execute:

npm run dev

Na primeira execução o processo irá demorar um pouco, isso ocorre pois o npm irá instalar mais algumas dependências necessárias. Por fim você terá algo como:

A imagem acima mostra quais foram os arquivos envolvidos no processo e qual seu tamanho final (calma, nada de sustos, o tamanho final após executar o comando de produção será infinitamente menor). Se por acaso você excluir os arquivos que estão em /public/css/* e /public/js/* e rodar a instrução npm run dev novamente, verá que os arquivos foram recriados.

Reforçando, você não deve mexer diretamente em /public/css e nem em /public/js. Se precisar alterar um arquivo css você deve mexer em /resources/sass/* e se for js em /resources/js/*. Posteriormente basta reexecutar o comando para gerar os arquivos pré-compilados. Legal não é!?

Mas pera lá? Toda vez que mexer em um arquivo de estilo ou javascript devo salvar e rodar um comando para criar a versão final? Claro que não, isso seria muito chato, afinal de contas somos desenvolvedores, queremos é simplificar a vida! Te apresento o:

npm run watch

Agora você pode alterar os arquivos contidos em /resources/sass/* e /resources/js/* a vontade, sempre que salvar o arquivo o npm irá automaticamente disparar o processo de compilação em background. Que coisa linda!

Mas e aquele comando que gera o build (pré-compilação) de produção? Vamos a ele:

npm run prod

Agora teremos arquivos infinitamente menores. Isso ocorre pois a instrução de produção aplica algumas técnicas de mimificação de arquivos, além de outras convenções utilizadas para escopo de produção. Se você for lá no /public/css e editar um arquivo, verá que ele tá bem “feinho”, tudo em uma linha, sem comentários, salvo o comentário contendo a licença de uso…

Realmente ficou bem menor em? Compare com a imagem anterior para se surpreender.

Finalizando

Como essa mágica acontece? O responsável por isso é o Laravel-mix, uma solução que nativamente já vem integrada com o Laravel Framework.

Veja esse artigo que escrevi mostrando como usar o Laravel-mix: http://fabiojanio.com/2019/04/15/laravel-mix-para-pre-processamento-scss-sass-less-js-e-import-alone-do-bootstrap/

Lembre-se: o Laravel-mix pode ser utilizado tanto dentro de um projeto Laravel, no qual já vem nativamente integrado e configurado, como em um projeto onde o Laravel Framework não é usado.

As definições do Laravel-mix ficam registradas no arquivo webpack.mix.js na raiz do projeto.