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:
[gist id=”8308531″ file=”install_gulp.sh”]
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:
[gist id=”8308531″ file=”package.json”]
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:
[gist id=”8308531″ file=”npm_install.sh”]
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:
[gist id=”8308531″ file=”gulpfile.js”]
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:
[gist id=”8308531″ file=”tree”]
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:
[gist id=”8308531″ file=”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”]Download[/button_download] [button_download href=”https://github.com/claudiosmweb/wordpress-gulp-theme-boilerplante”]Código no GitHub[/button_download]
Referências:
