O Laravel Mix é um wrapper elegante em torno do Webpack, sabe aquelas tarefas chatas de pré-processamento scss, sass, less, mimificação de css, js, otimização de imagens e muito mais? Esse camarada veio para simplificar tudo isso. Não deixe o nome te enganar, embora o Laravel Mix seja otimizado para o uso no Laravel Framework, ele pode ser usado em qualquer tipo de projeto, provendo resultados maravilhosos…
Como pré-requisitos você deve ter os seguintes elementos instalados em sua máquina:
Para instalar e configurar o laravel-mix irei seguir as orientações da documentação oficial, disponível em: https://laravel-mix.com/docs/4.0/installation
Segue os passos que serão executados neste tutorial:
- Criar um projeto com npm
- Instalar o laravel-mix e cross-env via npm
- Instalar o bootstrap via npm
- Configurando o laravel-mix
- Importar o bootstrap full e/ou componentes alone
- Executar o laravel-mix (gerar build)
1) Inicialmente precisamos inicializar um projeto com npm, para fazer isso basta criar um diretório vazio, acessar este diretório e executar:
npm init -y
O parâmetro “-y” é opcional, caso seja omitido o npm irá fazer algumas perguntas quanto ao nome do projeto, nome do autor, licença utilizada etc. O comando acima tem por única finalidade gerar o arquivo de especificação de projeto e dependências (package.json).
2) Agora vamos instalar o laravel-mix e o cross-env, este último é um modulo utilizado pelo webpack para “gestão” das variáveis de ambiente. Execute:
npm i laravel-mix cross-env --save-dev
O parâmetro “i” é uma abreviação para “install”, já “–save-dev” indica que tanto o laravel-mix quanto o cross-env são dependências de desenvolvimento.
3) Instalando o bootstrap via gerenciador de pacotes NPM:
npm i bootstrap --save-dev
Estamos realizando a instalação do bootstrap como dependência de desenvolvimento para podermos tirar vantagens das folhas de estilo scss, tais como realizar o import de componentes alone. Não se preocupe, mas adiante mostrarei como realizar o import alone de componentes.
4) Agora edite o package.json e substitua a chave “scripts” por:
"scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }
Agora copie o arquivo “node_modules/laravel-mix/setup/webpack.mix.js” para a raiz do seu projeto, ou crie ele com o conteúdo:
const mix = require('laravel-mix'); mix.js('src/app.js', 'dist/') .sass('src/app.scss', 'dist/');
Bem, neste código o src/app.js e src/app.scss são respectivamente nosso javascript e nossa folha de estilo de desenvolvimento, já a referência dist representa o diretório de destino no qual serão gerados os arquivos após passar pelo processo de build. Fique à vontade para definir a estrutura que melhor atende as suas necessidades.
5) Agora vem a cereja do bolo, os resultados! Seguindo a estrutura citada acima, crie dentro de src o arquivo app.scss e adicione a ele este conteúdo:
@import "~bootstrap/scss/bootstrap";
A instrução acima está basicamente realizando um importe do arquivo node_modules/bootstrap/scss/bootstrap.scss, caso edite este arquivo, verá que o mesmo é uma coleção de outros imports, ou seja, se assim como eu você é muito metódico quanto a escolha dos componentes de sua aplicação, e não deseja importar componentes que não serão utilizados no seu projeto, poderá ao invés de importar todo o bootstrap, especificar quais componentes deverão ser importados, assim terá um arquivo css final menor. Para fazer isso basta substituir o import full do bootstrap pela especificação dos componentes. Exemplo:
@import "~bootstrap/scss/functions"; @import "~bootstrap/scss/variables"; @import "~bootstrap/scss/mixins"; @import "~bootstrap/scss/root"; @import "~bootstrap/scss/reboot"; @import "~bootstrap/scss/type"; @import "~bootstrap/scss/images"; @import "~bootstrap/scss/grid"; @import "~bootstrap/scss/forms"; @import "~bootstrap/scss/buttons"; @import "~bootstrap/scss/button-group"; @import "~bootstrap/scss/input-group"; @import "~bootstrap/scss/badge"; @import "~bootstrap/scss/utilities";
Essa abordagem de importar somente o que de fato for ser usado irá resultar em um arquivo css final bem menor, sem falar que se surgir a necessidade de utilizar determinado componente, basta modificar este arquivo e mandar o laravel-mix gerar uma nova build.
Crie também um arquivo app.js dentro de src e adicione este conteúdo a ele:
if(true) { alert("Isso é um teste javascript"); }
6) Voltando a raiz do projeto, execute a instrução abaixo para gerar uma build de desenvolvimento:
npm run dev
Na primeira execução o webpack irá fazer a instalação de alguns componentes, sendo necessário reexecutar o comando, essa execução dupla é necessária somente na primeira vez. Caso troque a instrução dev por prod você terá uma build otimizada para produção, onde algumas rotinas extras como mimificação serão aplicadas silenciosamente. Além do modo dev e prod, você tem ainda o watch conforme podemos ver na tag scripts inserida em package.json, este comando ficará monitorando o diretório src e irá gerar uma build automaticamente sempre que houver uma modificação…
Opcionalmente você pode criar o arquivo index.html na raiz do seu projeto e testar se o css e js foram gerados com sucesso. Exemplo:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"/> <title>Exemplo</title> <!-- aqui tá nossa folha de estilo com bootstrap --> <link href="dist/app.css" rel="stylesheet"> </head> <body> <h1>Exemplo</h1> <button class="btn btn-primary">Botão de exemplo</button> <!—aqui tá o nosso alert --> <script src="dist/app.js"></script> </body> </html>
Lembre-se, você é livre para organizar a sua estrutura de arquivos como achar melhor…
No lugar de “npn run dev” você pode utilizar “npm run watch”, este ficará monitorando o seu diretório de desenvolvimento e irá automaticamente gerar uma build dos arquivos que estão sendo cobertos pelo webpack.mix.js sempre que um deles for alterado.