Usando Gulp com WordPress para automatizar tarefas

Para quem não conhece, Gulp é um task runner (automatizador de tarefas) que funciona com NodeJS, tornando possível diversas taferas, como compilar arquivos SASS para CSS, comprimir arquivos JavaScript e imagens, fazer deploy e etc.

Ele é similar ao Grunt, entretanto o jeito que ele funciona o torna similar ao Fabric do Python e Rake do Ruby, ficando bem simples de entender as tasks que estão sendo criadas.

Você pode usar o Gulp com praticamente qualquer projeto, principalmente com o WordPress e aqui vou mostrar como é simples fazer isso usando SASS, validando e comprimindo arquivos JavaScript e ainda otimizando imagens.

Requirimentos:

É necessário instalar o NodeJS: http://nodejs.org/download/.
Depois já é possível instalar o Gulp com o comando:

Criando seu arquivo package.json:

Agora crie dentro do seu tema uma pasta chamada src que iremos usar para deixar o Gulp e separá-lo dos arquivos principais do seu tema e o arquivo package.json com o seguinte conteúdo:

O package.json possui todas as dependências de desenvolvimento do projeto.
Altere no seu tema os campos name, description, version e title.

Instalando as dependências do projeto:

Dentro da pasta src rode o comando a seguinte para baixar as dependências do projeto:

gulpfile.js do projeto:

Agora para que seja possível criar suas tasks e executá-las você precisa de um arquivo gulpfile.js, para este exemplo usaremos o seguinte:

Neste arquivo descrevemos cada tasks criando uma função com gulp.task()

Tasks do projeto:

Então agora temos as seguintes tasks:

  • scripts – Valida e comprime todos os arquivos JavaScript.
  • sass – Compila todos os arquivos SCSS do projeto.
  • optimize – Otimiza todas as imagens.
  • watch – Assiste alterações nos arquivos de JavaScript e SCSS para processar as tasks scripts e sass.
  • default – Task padrão que compila todos os arquivos de JavaScript e SCSS.

Para mais detalhes sobre o funcionamento de cada task consulte as documentações:

Alterações no seu tema:

Como já pode ser possível observar no exemplo, utilizamos uma pasta src para os arquivos do Gulp e uma outra pasta assets na raiz do tema que irá conter todos os estáticos do projeto.

Ficando a seguinte estrutura de diretório:

Desta forma usaremos o style.css da raiz do tema apenas para registrar o tema no seu WordPress e para os estilos usaremos o assets/css/style.css.

Então podemos registrar todos os scripts e alterar o caminho do CSS do tema pelo functions.php:

E pronto, agora estamos carregando corretamente o arquivos de JavaScript e CSS do tema.

Exemplo:

[button_download href=”https://github.com/claudiosmweb/wordpress-gulp-theme-boilerplante/archive/master.zip”%5DDownload%5B/button_download%5D [button_download href=”https://github.com/claudiosmweb/wordpress-gulp-theme-boilerplante”%5DCódigo no GitHub[/button_download]

Referências: