Gulp e Wordpress

Gulp para acelerar o desenvolvimento WordPress

Muitas das atividades que executamos são repetidas diversas vezes,  com o Gulp podemos automatizar várias dessas atividades.

Precisamos trabalhar mais trabalhar de forma inteligente!

O que é Gulp?

Gulp é uma ferramenta desenvolvida em JavaScript que usa Node para automatizar tarefas rotineiras. A ideia é criar tasks que executam uma ou um conjunto de ações. Alguns exemplos de uso:

  • Copiar e deletar arquivos e pastas
  • “Escutar” alterações em arquivos para manter pastas sincronizadas
  • Concatenar arquivos JavaScript e CSS
  • Renomear arquivos
  • Compilar arquivos Sass para CSS
  • Minificar arquivos CSS e JS
  • Compactar imagens

Vários módulos npm estão disponíveis e podem ser pesquisados na seção Plugins do website.

Comece a usar

Compartilhei no GitHub o repositório WordPress Theme Dev para você já começar a usar processos automatizados no desenvolvimento de temas para o WordPress.

Esse repositório possui um esqueleto de tema para o WordPress e tarefas já configuradas para começar a usar processos automatizados no desenvolvimento de temas para WordPress.

Se gostar, de um fork e pratique criando novas funcionalidades, modificando ou criando novas tarefas para o seu projeto.

WordPress Theme Dev 🔗

Instalação

1. Certifique-se que NodeJS está instalado.
2. Clone ou faço o download do repositório para o seu workspace e instale os pacotes.

3. Certifique-se que o Gulp esteja instalado globalmente. Caso precise instalar em seu ambiente, utilize o comando:

Setup

Defina o nome do tema e pasta da instalação do WordPress no arquivo /build/paths.js.

Por padrão o diretório root dos arquivos do tema é src/ e do export export/.

Bundles

Crie seus bundles no arquivo /build/bundles.js.

Comandos

Inicia a verificação de mudanças nos arquivos do tema /src. Os arquivos serão copiados para /dist.

Build o tema onde o WordPress esta instalado /dist.

Build e Export tema para /export.

gulp export irá:

  • Gerar os bundles do projeto
  • Comprimir .css
  • Comprimir .js
  • Comprimir imagens: .svg, .png, .jpg e .gif

Limpa o diretório /dist

Limpa o diretório /export

🚀

Gostou Comente!