Automatizar Tarefas é sua Primeira Tarefa! Parte 1

Eae seus lindos(as), como foram de final de ano? Bom eu fui otimamente bem. Voltando as atividades nesse 2016 com essa série de 3 partes, E SE RECLAMAR VAI TER MAIS, about task runners (como podem ver sou poliglota, falo português e altas merdas). Automatizar tarefas é um passo bem importante durante o desenvolvimento. Ele vai agilizar bastante do seu tempo!

Imagine você trabalhando com angular e tendo que adicionar uma tag script pra cada controller, service ou whatever? Pensa… SÉRIO SÓ PENSA! Rodar paralelo altos terminais pre-copilando seu CSS, e se já não configurado, ter que minificar e renomear MANUALMENTE os arquivos posteriormente. Ta tranquilo? Ta favoravel? Não né… já cansou só de pensar que eu sei hahaha Pois bem, vamos la!

Gulp nosso de cada dia!

Antes dos haters virem de mimimimi, Gulp é uma preferencia minha, você pode usar Grunt se quiser… Mas eu sei que você é gente boa e não vai querer!

O gulp funciona de maneira simples, para facilitar você pode instalar o módulo do Gulp como dependência global para poder executar um gulpfile.js. Alem disso precisa ter o módulo do gulp local no seu projeto para poder importar-lo dentro do seu gulpfile.js. Com o módulo global teríamos algo como:

gulp <minhatask> <flgs>

Porem mais #sensa é que você pode rodar a tarefa do gulp pelo bin do modulo gulp baixado localmente (nesse momento você deve estar assim)

Porem o ‘pai’ ta aqui pra isso hahaha o que eu quis dizer é (DOIS PONTOS) se você optar por não ter o modulo global, você pode executar o gulpfile acessando e executando um .js do gulp

./node_modules/gulp/bin/gulp.js <minha_task>

Instalando o Gulp

Para as pessoas que queirão instalar o gulp globalmente : sudo npm i -g gulp. (já aviso que vou usar os exemplos com o global, caso você seja truzão hardcore, old school boy, o escolhido, diga não aos globais, containers na veia, sudo nunca, anti-chmod ou simplesmente que eliminar uma dependências e facilitar a vida do seu travis -eu dando spoilers- basta trocar o comando pelo path do bin)

Enfim vamos na nossa pasta e vamos instalar o módulo do gulp local npm i --save-dev gulp. (por favor criançada sei que vocês são inteligentes, porem vou lembrar do ‘npm init’ mesmo assim, bjos no cocore)

Minha primeira Task

Já diria o sábio que se não teve ‘Hello World’ você fracassou… logo vamos começar com a mão direita (até por que acho difícil alguém estar andando)

Em seguida vamos no nosso terminal (na pasta raiz do nosso gulpfile.js) e executar o bixão!

gulp start

Sintaxe do Gulp

O gulp tem uma vasta api, você pode ver-la na documentação linkada em parte dessa frase! Porem, mais uma vez, vou dar aquela passada básica no que vamos usar!

.task(name, deps, callback)
Esse amiguinho aqui é o responsável por muita coisa. Esse método é o responsável por cadastrar as tasks. O primeiro parâmetro é o nome que sera chamado, o segundo são as tasks dependências daquela task (é opcional) e o ultimo é o callback que sera realizado quando chamarmos essa task.

.src(files, opts)
Não vou perder tempo explicando as opções, elas são legais e muitas vezes importantes, porem, basta para esse momento saber que esse método é responsável por pegar os files que serão tratados no pipeline posteriormente.

.watch(files, tasks)
Aqui você pode criar um watcher que ira disparar um conjunto de tasks toda vez que determinadas files forem alteradas. (Essa foi didática pra ca#$%)

.dest(path)
Se você necessitar, isso pega os arquivos do pipe e transfere pro path passado.

Pipeline

O gulp funciona no melhor estilo pipeline, você normalmente usa o .src para selecionar arquivos e vai aplicando funções nele através do .pipe.

Plugins

Segue uma lista de plugins legais do gulp que você pode estar olhando + um gist explicativo com less + jscompact ❤

var list = [‘gulp-concat’ , ‘gulp-rename’ , ‘gulp-nanocss’ , ‘gulp-less’ , ‘gulp-autoprefixer’ , ‘gulp-uglify’]

Comandos gerados :

gulp
gulp build
gulp less
gulp js

Conclusão

Automatizar tasks não salva vida, mas salva tempo! Tirando que tira muito peso das suas costas. Essa parte um foi apenas uma introdução, no próximo tópico falaremos de task mais complexas, testes unitários e como arquitetura suas tasks de maneira elegante :)
Obrigado por todos os feedbacks positivos e as criticas construtivas que vocês vem me dando, e logo, ja sabem… Criticas, sugestões, dicas, duvidas ou meu endereço pra me mandar bacon/chocolate ou a Scarlett Johansson, vocês podem me achar no Twitter, Linkedin e GitHub.

Aquele abraço e até mais!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.