Image Image Image Image Image
Scroll to Top

Topo

Javascritpt

31

jan
2014

Sem Comentários

Em Blog
Código
JavaScript
NodeJs

Por Mike Lopes

Uma introdução ao gulp

Em 31, jan 2014 | Sem Comentários | Em Blog, Código, JavaScript, NodeJs | Por Mike Lopes

a84cbe09a6fc383b43833c60b3f2aa29

* Por João Paulo

Introdução:

Muitas tarefas são feitas manualmente de forma repetitiva, por exemplo, ao alterar certos arquivos de um site, é necessário fazer o upload para que possam ser acessados pela web; porém, para isso, é necessário abrir o cliente ftp, preencher os dados e conectar, depois selecionar os arquivos e enviar. Além de perder tempo, essas são tarefas chatas a serem feitas, então para isso existem “automátizadores” como o grunt e o gulp.

O gulp é um automatizador de tarefas desenvolvido em cima do nodejs, seu funcionamento será estudado nesse artigo.

Instalando:

Para instalar o gulp é necessário instalar o nodejs (no ubuntu, é só executar o comando #apt-get install nodejs).

Também, obviamente, é necessário instalar o gulp. O gulp é dividido em duas partes, o “gulp CLI” que é o aplicativo para ser executado na linha de comando e o gulp, a biblioteca pro nodejs.

  • Para instalar o CLI, execute: “npm -g install gulp” (npm é o gerenciador de pacotes do nodejs).

  • Para instalar a biblioteca:  “npm install –save-dev gulp”.

Estrutura básica:

O gulp foi desenvolvido sobre o nodejs, logo é necessário ter conhecimento de javascript para poder utilizá-lo.

A primeira coisa a ser feita é criar o arquivo “package.json”, é nesse arquivo que ficam as informações sobre o projeto, como nome, versão e quais bibliotecas estão sendo utilizadas. Outro arquivo importante é o “gulpfile.js”, é esse arquivo que será lido ao executar o gulp no console para executar as automatizações, logo é nele que ficarão nossos scripts.

O “package.json” pode ser criado na mão, porém o npm pode criá-lo pra você, para isso execute “npm init” e seguir as instruções (é possível deixar tudo em branco).

O “gulpfile.js” deverá ser criado a partir de algum editor de textos.

Para instalar um plugin usa-se: “npm install –save-dev <nome-do-plugin>”, por exemplo, o uglify “npm install –save-dev gulp-ufligy”.

Como o gulp foi escrito por cima do nodejs, um plugin do gulp é uma dependência do nodejs, logo o campo com a relação dos plugins instalados no “package.json” é o “dependencies”, assim outra forma de instalar as dependências (caso o “package.json” tenha sido criado manualmente) é colocá-las no campo “dependencies” e executar no console “npm install”. Para a relação dos plugins oficiais do gulp acesse: “http://gratimax.github.io/search-gulp-plugins/”

Ao instalar um plugin, é necessário definir ele no script também, para isso usa-se “require(‘plugin’)”, por exemplo, “var gulp = require(‘gulp’);” e nesse caso, para acessar os métodos do gulp “gulp.nome_do_método();”

O gulp possui poucos métodos, abaixo segue uma DESCRIÇÃO PRÁTICA do uso deles (as informações completas sobre o uso deles são encontradas na documentação):

  • gulp.src(globs): Define o arquivo ou a pasta que terá seus arquivos lidos. O parâmetro “globs” pode ser uma string ou um array, por exemplo, “./arquivos/*.js” ou “[./arquivos/arquivo1.js, ./arquivos/arquivo2.js, …]”
  • gulp.dest(path): Define a pasta de saída do processamento.  ex.: gulp.dest(“./pasta_de_saída”)
  • gulp.task(‘Nome_da_tarefa’, function(){ /* aqui fica seu código */ }): As tarefas são blocos de códigos que serão executados. ex.: gulp.task(‘enviar_por_ftp’, function{ /* aqui ficam as instruções de como enviar */ });
  • gulp.run(‘task1’, ‘task2′, … ,’taskN’): Esse método serve pra chamar outras tarefas do mesmo projeto.
  • gulp.watch(glob, tasks): Equivalente ao “run”, ele executa outras tarefas definidas no task, porém ele executa quando há alterações nos arquivos definidos no glob, ex.: gulp.watch(‘./teste/*’, [‘enviar_por_ftp’, ‘outra_tarefa’]); nesse exemplo se qualquer arquivo na pasta “teste” for alterado, ele executará as tarefas ‘enviar_por_ftp’ e ‘outra_tarefa’.

Para executar uma tarefa basta executar: “gulp <tarefa>”, por exemplo, “gulp enviar_por_ftp”. Caso exista a tarefa “default”, ela será executada simplemente com “gulp”, mas “gulp default” também funciona.

Exemplo:

No exemplo abaixo serão juntados todos os arquivos da pasta “entrada” e será criado um arquivo chamado “concatenados.txt” na pasta “saida”. Para isso será usado o plugin “gulp-concat”.

Primeiramente, é necessário instalar o nodejs (#apt-get install nodejs) e o gulp CLI (#npm -g install gulp).

Depois é necessário criar o projeto ($npm init), observe que o “package.json” foi criado; agora vamos instalar as bibliotecas do gulp e os plugins (npm install –save-dev gulp gulp-concat), observe que o “package.json” agora possui nas dependências “gulp” e “gulp-concat”.

O próximo passo é criar o script, para isso crie o arquivo “gulpfile.js” na pasta raiz do projeto com o script abaixo.

//Criada a variável 'gulp' que é a "instância" da biblioteca 'gulp'

var gulp = require('gulp');

//Criada a variável 'concat' que é a "instância" da biblioteca 'gulp-concat'

var concat = require('gulp-concat');

//Criada a tarefa 'default'

gulp.task('default', function(){

//São lidos todos os arquivos da pasta 'entrada'

gulp.src('./entrada/*')

//Os arquivos lidos são concatenados num arquivo chamado 'concatenados.txt'

.pipe(concat('concatenados.txt'))

//A saída gerada pelo concat é salva na pasta chamada 'saída'

.pipe(gulp.dest('./saida'));

});

 Para executar o script acima basta executar “gulp” (ou “gulp default”) no terminal.

Para informações sobre o gulp acesse: https://github.com/gulpjs/gulp/blob/master/docs/README.md

* João Paulo é estudante de Computação e estagiário da SWX

Tags | , ,