Pra que eles servem?
De modo simples e resumido, ambos servem para automatizar e simplificar o seu fluxo de trabalho e processos.
Por exemplo, eu utilizo Grunt
para fazer o processo dos meus arquivos em SASS
e gerar um CSS
minificado, sem ter que copiar meu arquivo, enviar para um serviço online para minificar, ou pior (e muito menos provável), fazer na mão. Outro exemplo, seria a concatenação de arquivos JS
, enviar seus arquivos para uma hospedagem online através de uma conexão ftp
, etc. São diversas opções.
Existe alguma relação entre eles?
Sim e não. Sim, pois ambos possuem a mesma finalidade, automatizar e simplificar processos. Não pois o modo como são feitos diferem um do outro e ai a questão muda bastante, pois começa a entrar mais em uma questão de preferência do que qual é melhor.
Eles podem ser comparados ao bower, por exemplo?
Não. Bower
está para ser comparado com NPM
. Ambos são gerenciadores de pacotes, por exemplo, você irá usá-los para fazer download de um plugin, enquanto grunt
ou gulp
será usado para processos (ou tarefas) dentro desses plugins. Bower
e NPM
teriam mais como finalidade você fazer download do bootstrap
, por exemplo, verificar a versão e manter atualizado, tudo isso sem precisar ir de fato ao site do bootstrap
e fazer isso manualmente.
Teria algum exemplo de como/ou quando usar um ou outro?
Como já citado nas respostas acima, mas só para reforçar. Existem diversas tarefas que eles podem executar, vou citar as que eu mais uso através do Grunt
:
- Concatenar e processar arquivos de
SASS
e Compass
;
- Remover classes não usadas de um arquivo
CSS
quando comparado aos arquivos html
;
- Minificar o arquivo
CSS
e fazer compressão em gzip
;
- Concatenar e minificar arquivos
JS
;
- Compactar o projeto e executar upload para uma conexão
ftp
, colocando o projeto online;
Ou seja, todo esse processo é executado automaticamente pelo Grunt
. Eu só preciso executar a linha de comando, exemplo grunt execBuild
(baseado nas minhas configurações e pacotes) e todas essas tarefas serão executadas automaticamente. Então você pode ver um exemplo bem prático, funcional e que automatiza bastante as tarefas.
Já imaginou fazer isso tudo na mão?