Gulp é um automatizador de tarefas, semelhante ao Grunt, porém mais rápido. Para quem já utiliza o Grunt, geralmente pergunta porque deveria utilizar o Gulp, a reposta é simples, o Gulp é mais rápido e tem uma escrita mais simples.
Para quem não sabe, automatizador de tarefas é uma ferramenta que agiliza o processo de desenvolvimento em ações repetitivas. Exemplo, minificar arquivos Javascript e CSS. Testar se o código Javascript está correto, agrupar diversos arquivos em um, ofuscar código Javascript… São diversas opções, você pode conferir todos os pacotes visitando o link de Plugins.
Chega de explicações e vamos fazer na prática.
Obrigatório ter o node.js instalado, caso não tenha, entre no site node.js, faça download e instale.
Crie uma pasta com um nome desejado, entre nesta pasta e crie o arquivo package.json com o conteúdo abaixo:
{ "name": "aprendendo", "version": "1.0.0", "description": "Aprendendo Gulp", "author": "Seu nome<seu@email.com.br>", "devDependencies": { "gulp": "*", "gulp-uglify" : "*", "gulp-concat" : "*" }}Após o arquivo criado, adicione seu nome e e-mail na linha “author” de acordo com o formato exemplificado. Depois, instale as dependências via linha de comando ( obrigatório estar na pasta criada ):
npm install
Agora, crie o arquivo gulp.js que será onde ficará as configurações do Gulp e insira o conteúdo:
var js = [ './js-source/vendor/jquery/*', // Todos os arquivos do diretório Jquery './js-source/vendor/bootstrap/*.*', // Todos os arquivos do diretório bootstrap e sub diretórios './js-source/main.js' // Arquivo único];// Núcleo do Gulpvar gulp = require('gulp');// Transforma o javascript em formato ilegível para humanosvar uglify = require("gulp-uglify");// Agrupa todos os arquivos em umvar concat = require("gulp-concat");// Tarefa de minificação do Javascriptgulp.task('minify-js', function () { gulp.src(js) // Arquivos que serão carregados, veja variável 'js' no início .pipe(concat('script.min.js')) // Arquivo único de saída .pipe(uglify()) // Transforma para formato ilegível .pipe(gulp.dest('./js/')); // pasta de destino do arquivo(s)});// Tarefa padrão quando executado o comando GULPgulp.task('default',['minify-js']);// Tarefa de monitoração caso algum arquivo seja modificado, deve ser executado e deixado aberto, comando "gulp watch".gulp.task('watch', function() { gulp.watch(js, ['minify-js']);});Neste arquivo, estamos supondo que estamos com a seguinte estrutura:
js-source vendor jquery jquery.js bootstrap bootstrap.main.js bootstrap.plugins.js main.jsjs(pasta vazia)gulp.jspackage.json
Execute o comando abaixo:
gulp
Após executar o comando gulp, será gerado o arquivo script.min.js na pasta js. Desta forma, após alterações nos arquivos o comando deverá ser disparado novamente para gerar a nova versão. Um pouco trabalhoso, mas existe uma maneira de automatizar isto.
Vamos utilizar a TASK “watch” para fazer isto por nós. Digite “gulp watch” e deixe a janela aberta, não cancele pois o processo ficará monitorando os arquivos, caso algum tenha alguma alteração, o arquivo final será gerado novamente.
Este exemplo é válido para compactar, ofuscar e gerar um arquivo único de javascript. No próximo tutorial vamos mostrar como fazer isto com arquivos CSS.