Laravel: Gerenciando Assets com Laravel Mix

Já sentiu dor de cabeça ou preguiça de configurar o Laravel webpack de forma eficiente em seu projeto?

Bem, eu tenho!

O Laravel Mix fornece uma API que abstrai toda a configuração do webpack, módulos agrupados e ativos compilados e suporta vários pré-processadores CSS e JavaScript.

É importante lembrar que você pode utilizar o Laravel Mix em projetos que não serão implementados com base no laravel!

Exemplo de Uso:

Instalação do pacote através do npm:

Configuração básica:

Considerando a seguinte estrutura de diretórios, criei uma aplicação básica para ilustrar melhor o uso do Laravel Mix:

Nesta estrutura existe um arquivo chamado webpack.min.js que deve ser criado manualmente no diretório principal onde escreveremos todas as operações que queremos fazer com os ativos.

Cole este conteúdo no arquivo webpack.min.js:

Neste script, estamos escrevendo para que o laravel mix compile os assets (app.js e app.scss) e os envie para o diretório public, onde poderão ser acessados publicamente por toda a aplicação.

Comandos e a “receita” do package.json:

No arquivo package.json, acrescente o seguinte conteúdo:

Este conteúdo provê os comandos que iremos utilizar para executar o webpack com o laravel mix através do npm, são eles:

npm run watch

Este comando irá agrupar, compilar e validar scripts e enviá-los para um diretório público e manter o monitoramento dos mesmos em tempo real, ou seja, toda vez que algum recurso for alterado, todo o processo se repete.

npm run production

Este comando executa o mesmo processo que o comando acima, mas não continua a monitorar e otimizar o arquivo para produção, como realizar minificações, etc.

Após executar o comando npm run production, podemos verificar se os ativos foram carregados no diretório público:

Depois disso, basta incluir o ativo em sua visualização base ou arquivo de modelo como este:

JavaScript:

prepare-se! É muito fácil organizar os ativos do seu aplicativo dessa maneira, não é? Sem contar que podemos contar com o poder do npm para gerenciar todas as dependências do nosso projeto!

Criei um projeto básico para ilustrar melhor o uso de dependências de terceiros, que você pode acessar através deste link do GitHub.

Espero que este artigo ajude a comunidade!

Grande abraço até a próxima!