Gulp-cozy é um pacote de NPM experimental que permite que você organize suas tarefas Gulp de uma forma mais modular com simplicidade e “aconchego” em mente.

Justificativa

Já se encontrou cavando um gigantesco monstruoso Gulpfile com centenas de funções e tarefas espalhadas por todo lado? Se isso aconteceu com você, estou certo de que você pode dizer que não é um bom sentimento…

Essa é a razão pela qual eu criei este pequeno módulo como uma tentativa de ajudar a me manter mais aconchegante (e mais feliz!) quando trabalho com Gulp. De certa forma, ele tenta trazer um pouco da filosofia Node (também conhecida como “A maneira Node“) para seu Gulpfile.

Gulp-cozy, de fato, oferece uma maneira muito fácil (leia-se: muito-muito-muito-fácil) para separar todas as suas tarefas Gulp em pequenos módulos organizados dentro de uma pasta dedicada. Gulp-cozy cuidará de carregar todos os módulos e registrá-los como tarefas Gulp. Com essa abordagem, você vai acabar com vários pequenos módulos que servem a um propósito específico (uma tarefa), que por sua vez resulta em facilidade de manter e de raciocinar a respeito.

Instalação e uso

Chega de conversa, vamos para a prática! Como a maioria dos pacotes de NPM, para instalar gulp-cozy, você só precisa executar o seguinte comando dentro de sua pasta de projeto:

npm install --save-dev gulp-cozy

É claro que eu estou supondo que você já instalou o Gulp globalmente e como dependência dev local para seu projeto.

Uma vez terminado o download do NPM (deve ser rápido, o módulo é muito pequeno!), você pode transformar seu Gulpfile.js nisto:

#Gulpfile.js

var gulp = require('gulp');  
var cozy = require('gulp-cozy');  
cozy(gulp);

SIM! Esse será o único conteúdo de seu Gulpfile… Então você deve perguntar: “onde todas as tarefas lógicas foram parar?”.

A ideia é manter todas as tarefas dentro de uma pasta gulp na pasta do projeto principal (não te faz pensar na abordagem de pasta node_modules?!). Cada tarefa é um arquivo cujo nome irá representar o nome da tarefa gulp.

Não se preocupe muito por enquanto, vamos apenas criar essa nova pasta gulp, e tudo vai ficar mais claro em um momento com um exemplo mais prático.

Vamos supor que queremos criar uma nova tarefa para construir os arquivos css para o nosso novo projeto. Para isso, podemos adicionar a tarefa build-css criando o arquivo build-css.js da seguinte forma:

#gulp/build-css.js

var concat = require('gulp-concat');  
var minifyCss = require('gulp-minify-css');

module.exports = function(gulp) {  
  return function() {
    return gulp.src([
      './node_modules/bootstrap/dist/css/bootstrap.css'
    ])
      .pipe(concat('all.css'))
      .pipe(minifyCss({compatibility: 'ie8'}))
      .pipe(gulp.dest('./assets/'))
    ;
  }
}

Observe que o módulo exporta uma função que recebe a instância atual do Gulp como argumento. Essa função é uma factory para a verdadeira tarefa lógica do Gulp, então ela deve retornar uma função que será executada ao chamar a tarefa build-css com:

gulp build-css

Você também pode criar um módulo para chamar tarefas em série como no exemplo a seguir.

#gulp/build.js

module.exports = ['clean', 'build-css', 'build-js', 'compress', 'upload'];

Nesse caso, em vez de usar uma função factory, o módulo precisa exportar apenas um array simples contendo os nomes das tarefas a serem invocadas. Você pode lançar essa nova tarefa com:

gulp build

O que você acha? Isso não torna as coisas mais separadas, organizadas e, o mais importante, “aconchegantes”?

Longo caminho para a perfeição

Como eu disse na primeira linha, esta abordagem tem de ser considerada experimental por enquanto, e ainda há muitas preocupações que eu tenho sobre ela.

Primeiro de tudo, o módulo tenta expor uma superfície muito pequena e fazer uma coisa simples. Isso é geralmente bom e ele adere à filosofia node. Mas, ao mesmo tempo, provavelmente não é muito flexível.

Seria ótimo ter uma maneira de definir modelos de tarefas genéricas, como o processamento de arquivos CSS (compilar a partir do sass, concatenar e minificar), e então ter uma maneira configurável de usar esse modelo com diferentes conjuntos de arquivos e produzir diferentes ativos.

No momento, você poderia fazer isso criando um módulo configurável genérico fora de sua pasta gulp e, então, requerê-lo e usá-lo dentro de uma ou mais tarefas na nova pasta. Essa abordagem deve funcionar sem grandes esforços, mas não me parece muito certa para mim no momento.

Provavelmente, o módulo deve expor mais funções para lidar com casos mais complexos, mas tudo se resume à eterna luta entre “manter as coisas simples” e “fazer o novo módulo de pau-para-toda-obra”.

Contribuindo

Se você quiser contribuir com este projeto, pode encontrar as fontes no GitHub (é claro!). Se este projeto é interessante para você, seja muito bem-vindo a contribuir, enviar um pull request ou simplesmente abrir uma issue.

Se você decidir pelo full request, por favor, tome cuidado para manter o estilo de codificação existente e adicionar testes unitários para qualquer funcionalidade nova ou alterada.

O projeto está atualmente usando XO para Styleguide e style checks executados com o conjunto de testes regular.

Conclusão

Estou muito curioso para ver se este tema e esta biblioteca podem ser de qualquer interesse para outras pessoas. Eu gostaria de saber se alguma vez você se questionou sobre encontrar as melhores soluções para organizar suas tarefas Gulp e se você pensou em algum tipo de solução pessoal.

Antes de terminar, eu tenho que agradecer ao meu querido amigo Andrea por discutir esses tópicos e me dar a inspiração para investir algum tempo neste assunto.

Até a próxima vez! 🙂

***

Luciano Mammino faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: http://loige.co/introducing-gulp-cozy-manage-your-gulp-tasks-in-a-cozier-way/