Laravel Elixir e Zurb Foundation, revisitado

Editado a 25 de Novembro de 2016: Vê o fundo do post para uma actualização relativa ao Elixir 6.

Na última vez que escrevi sobre como usar a framework Foundation com o Laravel Elixir disse que o pacote npm não instalava as dependências necessárias e, por isso, tínhamos que instalar via Bower. Não tenho certeza se era eu que estava errado ou se alguma coisa mudou depois desse post, mas agora isso já não é assim.

Além disso, entretanto, saiu uma nova versão da framework, Foundation for Sites 6. Logo, acho que é boa ideia reescrever o tutorial sobre como substituir o Bootstrap pela Foundation no Laravel Elixir.

0. Configurar

Antes de começar, certifica-te de que tens o Node.js, npm e gulp instalados e a funcionar. Na raiz do projeto, deves ser capaz de executar os comandos npm install e gulp sem erros.

Vê na documentação do Laravel Elixir mais informações.

1. Instalar a Foundation

1.1. Se ainda não o fizeste, instala as dependências do npm. Antes de executar o comando a seguir deves querer remover a linha do bootstrap-sass do ficheiro package.json, para que o Bootstrap não seja instalado

1.2. Se o Bootstrap já estiver instalado podes removê-lo com o seguinte comando.

1.3. Instala a framework Foundation.

1.4. (opcional) A Foundation 6 traz o Motion UI, uma biblioteca Sass para criar animações e transições. Instala-a com o seguinte comando.

Se não a quiseres usar, remove qualquer referência a ela nos ficheiros seguintes.

2. Criar os ficheiros sass

Agora, vais precisar de dois ficheiros, normalmente na directoria “resources/assets/sass”. Estes são os ficheiros que, posteriormente, vais editar.

2.1. Copia o ficheiro  “_settings.scss” da directoria “node_modules/foundation-sites/scss/settings” para a directoria “resources/assets/sass”. Este ficheiro contém todos os parâmetros dos vários componentes da Foundation que podemos personalizar.

2.2. Em “resources/assets/sass” cria um ficheiro chamado “app.scss” com o seguinte conteúdo. Este é o ficheiro principal, em que se fazem todos os imports / includes e escreves o teu próprio sass.

Aqui, aconselho a comentar todos os includes e apenas descomentar os que precisas e à medida que vão sendo precisos (de notar que o foundation-global-styles é basicamente sempre necessário).

3. Escrever as tarefas no Elixir

Escreve as tarefas que vão compilar o SCSS para CSS e copiar e concatenar os ficheiros de JavaScript.

Na tarefa referente ao JavaScript, copiamos e concatenamos os ficheiros necessários para o Foundation funcionar. No mínimo são necessários o “jquery.js” e o “foundation.core.js”. De seguida adicionamos os ficheiros necessários aos componentes que vamos usar (os ficheiros listados são apenas um exemplo). O ficheiro “start_foundation.js” inclui apenas o código necessário para inicializar a Foundation ( $(document).foundation();).

4. Correr o gulp

Finalmente, estás pronto para correr os comandos  gulp ou  gulp watch (para executar automaticamente as tarefas sempre que algum ficheiro seja alterado). Isto vai gerar um ficheiro chamado “app.css” na directoria “public/css” e um ficheiro “all.js” na directoria “public/js” que depois pode ser incluídos nas views.

Nota: Se queres que os ficheiros sejam também minificados deves adicionar a flag --production  ( gulp --production ou  gulp watch --production).

Actualização para Elixir 6

Por alguma razão que eu não consigo entender, o Elixir 6 não suporta Babel. Agora só inclui rollup.js e webpack. Não sei se é possível usar algum destes bundlers com a Foundation, mas, até agora, ainda não o consegui fazer. Se souberes como, deixa um comentário.

Resolvi o problema instalando o Babel e as outras ferramentas necessárias, escrevendo uma tarefa nativa do gulp e chamando essa tarefa na função do elixir. Assim:

1. Instalar as ferramentas necessárias

E requerê-las no topo do gulpfile.js .

2. Escrever a tarefa do gulp

Escreve a tarefa do gulp, fora da função do elixir, que compila os ficheiros com o babel, concatena-os, minifica-os (com o uglify) e escreve o resultado no caminho desejado. De notar que os caminhos relativos, aqui, são diferentes, são relativos à raiz do projecto (onde está o gulpfile.js).

3. Chama a tarefa a partir do elixir

Finalmente, na função do elixir, em vez de chamar mix.babel, chama a tarefa que escreveste. O primeiro parâmetro é o nome da tarefa e o segundo é o caminho onde observar alterações que devam activar a tarefa. Possivelmente, vais queres ajustar isto às tuas necessidades.

Claro, também podes chamar a tarefa directamente a partir da linha de comandos com gulp scripts.

4. Sass

A compilação do sass funciona quase da mesma forma que anteriormente. A única diferença é que agora aceita quatro parâmetros, por isso deve ser chamada da seguinte forma:

Zé Cipriano
Web developer independente (PHP, Laravel).

Um comentário a “Laravel Elixir e Zurb Foundation, revisitado

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *