Fala Galera,
Ao longo do ano passado, varios novo projetos feitos em javascript surgiram, muito devido ao fato que o Javascript não está limitado somente ao Browser, sim ligado também a plataforma Node.js. E na onda deste boom de projetos surgiram meio alternativos a ferramentas de processo tradicionais como Ant, Maven como o Gulp.js e Grunt.js
E por que precisamos de automatizar tarefas ?
Automatizadores de tarefas ajudam a programodores a realizarem tarefas repetitivas mas essencias para o desenvolvimento como: concatenização de arquivos, minificação, teste e muito mais coisas que facilitam o desenvolvimento.
Grunt.js é uma ferramenta de automatização de tarefas excelente, eu mesmo usei muito, porém não é tão simples de usar já que necessita que o desenvolvedor saiba a sintaxe de criação de objeto Javascript. Isso pode ser um pouco complicado no começo para quem não tem tanta afinidade com Javascript.
Então eis que surgi um novo automatizador de tarefas o Gulp.js, e porque Gulp.js ?
O Gulp.js é muito mais rápido que o Grunt pois ele usá o stream do Node.js para escrever nos arquivos. Ele é muito mais simples de escrever pois sua sintaxe é bem semelhante ao Node.js.
Instalação do Gulp.js
O Gulp.js roda em cima do Node.js então é necessário que você tenha o Node.js instalado em sua maquina. Caso você já tenha instalado o node, execute o comando abaixo para instalar o cliente do Gulp.js
npm install -g gulp
Após a instalação vamos verificar se tudo está correto, digite no terminal
gulp -v
Se o comando retornar a versão do Gulp.js, significa que está tudo ok =]
Começando com o Gulp.js
Agora vamos a automatização das nossas tarefas para isso crie uma estrutura de pasta conforme desenho abaixo:
|Projeto/
|--build/
|--src/
|--source.js
|--Gulpfile.js
Agora no terminal, na raiz do seu projeto digite o comando abaixo, vamos criar um package.json, ele será o responsável por gerenciar os pacotes de nossa aplicação.
npm init
Este comando irá fazer uma serie de perguntas como nome do projeto, versão, descrição e etc. Você pode fornecer todos os detalhes ou simplementes ignorá-los apertando “Enter”. No final ele deve criar uma estrutura de JSON parecida com essa aqui abaixo:
{
"name": "glup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rafael Cruz"
}
Vamos agora criar nossas dependências de projeto alterando o arquivo package.json conforme mostrado abaixo:
{
"name": "glup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rafael Cruz",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-util": "^3.0.8",
"gulp-uglify": "^2.0.0",
"gulp-watch": "^4.3.11"
}
}
A grande vantagem de usar o package.json é que podemos determinar quais são as dependências que nosso projeto usa e assim todos podem utilizar as mesmas dependências sem precisar que cada um fique pesquisando na internet e instalando versões erradas.
Para instalar as dependências, digite em um terminal:
npm install
Com o comando executado, note que no seu projeto deve ter sido criado uma pasta chamada node_modules e dentro desta pasta deve ter as dependências que estão descritas no package.json
Configurando as tarefas.
Para executar o Gulp.js precisamos configurar as tarefas que serão executadas por ele. Crie um arquivo chamado Gulpfile.js dentro da pasta raiz do seu projeto e assim vamos configurar as tarefas que serão executadas por ele.
Primeiro passo devemos instanciar os módulos que serão usados pelo Gulp.
var gulp = require('gulp');
var gulpUtil = require('gulp-util');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
Iremos criar a tarefa para minificar os arquivos Javascript para uma pasta chamada build/js. Para que possamos fazer isso, vamos usar a task do Gulp.js, ele recebe 2 parametros, o primeiro é o nome da tarefa e o segundo é um callback de função com os passos que a tarefa irá fazer.
gulp.task('build', function() {
return gulp
.src(['src/**/*.js'])
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
Nossa tarefa está pronta, vamos testá-la utilizando o comando abaixo:
gulp build
Vamos criar mais uma tarefa, será o watch, essa terafa será responsável por ficar de olho nas modificações dos arquivos e copiar para a pasta de destino (build/js).
gulp.task('watch', function () {
gulp.watch(["src/**/*.js"], ['build']).on('change', function (e) {
console.log('Javascrip file ' + e.path + ' has been changed. Compiling.');
});
});
Nesta função estamos criando um watch que ficará monitorando a pasta src em busca de alguma alteração nos nossos arquivos Javascript, caso encontre ele irá executar a tarefa build, que tem como responsabilidade minificar nossos arquivos js e copiá-los para a pasta build/js.
Para testar esse novo comando, vá ao terminal e digite o comando abaixo:
gulp watch
Faça modificações nos arquivos javascripts na pasta src que você deverá ver o Gulp.js copiando para a pasta de destino.
Pronto, finalizamos nossas tarefas utilizando o Gulp.js.
Caso queira saber mais sobre o Gulp, clique aqui e conheça sua documentação
O exemplo deste post pode ser encontrado no meu GitHub atráves deste link
Abs e até a próxima