· ferramentas  · 3 min read

Gulp | Esse é ligeiro

Começando com Gulpjs

Você é preguiçoso que eu sei! Programadores são preguiçosos… - Nem vem com Mimimi, por que você é sim - É por ser preguiçoso que o programador cria soluções que automatizam as tarefas, algo para agilizar as coisas chatas e sobrar tempo para as coisas legais - Como brincar com uma bolinha de papel. E foi pra automatizar tarefas que surgiu o Grunt.

Grunt? Não era Gulp?

Automatização

Quem trabalha com infra (Como eu trabalhava) deve saber que da pra automatizar muita coisa com Scripts, tanto com Shell Script quanto com Powershell - Famosos arquivos .sh ou .bat - E hoje isso está acontecendo, também, no Front End.

Algumas tarefas são essenciais para deixar sua aplicação melhor, como minificar o JS e CSS, fazer testes e verificar erros no código por exemplo e foi pra facilitar nossa vida que surgiu o Grunt. Com ele nós evitamos aqueles trampos repetitivos. É tipo o Rake no Ruby.

Então pra que usar esse tal de Gulp se já tem o Grunt?

Por que o Gulp é mais rápido e mais fácil de ser configurado. O Grunt é da hora, porém o gulpfile, que é equivalente ao gruntfile, é mais fácil se você já conhece a sintaxe do Nodejs, por exemplo, vai entender o gulpfile com muito mais facilidade e o Gulp tem uma performance melhor.

Instalação

Facinho! Se você tem o Node.js instalado, então execute o comando:

npm install -g gulp

Porém essa só é a instalação do CLI do Gulp pra que o mesmo possa ser executado pela linha de comando via terminal. Quando for usar o Gulp no projeto, você deve rodar esse comando de novo dentro do repositório:

npm install gulp

Para facilitar, na hora em que for instalar plug-ins no repositório do seu projeto, instale tudo de uma vez, por exemplo:

npm install gulp gulp-jshint gulp-uglify

Utilizando

Você deve criar o gulpfile dentro do repositório do seu projeto, parecido como bower.json, porém você irá salvar o arquivo com a extensão .js. Olha só um gulpfile basicão:

var gulp = require('gulp');

gulp.task('default', function () {
  // place code for your default task here
});

Aqui já da pra entender mais ou menos né?

Com o gulpfile.js dentro do repositório é só rodar o comando e as tarefas que estiverem na listinha serão executadas. Maneiro né?

Se você quiser rodar uma task específica no lugar de rodar tudo o que estiver no arquivo basta rodar gulp e o nome da task.

Mas não pare por aqui, vale a pena dar uma conferida nessa outra dica

O Gulp possui algumas tarefas básicas que precisamos entender, e elas estão aqui.

Depois de entender isso é só dar uma pesquisada na forma em que outras pessoas estão usando o Gulp para agilizar. Por exemplo:

Se eu quiser saber algum plugin para minificar os arquivos basta pesquisar no Google:

“minificar arquivos gulp”

Com o tempo você vai conhecer muitos plugins maneiros e deixar do seu jeito o seu arquivo gulpfile.js. ;)

Back to Blog

Related Posts

View All Posts »

O que é e para que serve debounce em JavaScript

Uma dica importante de performance em JavaScript quando estamos trabalhando em aplicações web ricas ou as famosas SPAs. O debounce é muito útil e importante no universo JavaScript, por isso confira este texto e os exemplos até o final.

Trabalhando com repositórios remotos - Git e GitHub

No dia a dia utilizamos servidores para armazenar nosso repositório Git. Neste artigo vamos aprender a criar repositórios remotos no GitHub e também criar repositórios locais e depois subir par ao servidor.

O que é e para que serve throttle em JavaScript

Uma dica importante de performance em JavaScript quando estamos trabalhando em aplicações web ricas ou as famosas SPAs é o uso de throttle para evitar múltiplas chamadas de uma mesma função, o que pode acarretar em vários problemas.