Laravel-mix para pré-processamento scss, sass, less, js…E import alone do bootstrap

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:

Node.js
NPM

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.