Image Image Image Image Image
Scroll to Top

Topo

gulp

SWX Direto das trincheiras 03 – Campus Party, Podcasts e Forum de Inovação tecnológica

Em 13, fev 2014 | 17 Comentários | Em Blog, CMS, Código, Destaques, JavaScript, NodeJs, Ruby, Vídeos, Wordpress | Por Mike Lopes

Neste SWX Direto das trincheiras trazemos as novidades que rolaram na SWX, se perdeu alguma coisa confira:

  • SWX Labs 03 – Editais de Inovação: http://bit.ly/SWXLabs03
    • Bate papo com Marcelo Dósea, sobre Editais de Inovação, sua importância e como se preparar para participar.
  •  SWX Labs 04 – Planejamento: http://bit.ly/SWXLabs04
    • Neste podcast Benhun, gerente de projetos de SWX, fala sobre planejamento. São debatidos conceitos e dicas de como preparar um bom planejamento.
  • 5 formas de utilizar o google alerts para alavancar seu negócio ou carreira: http://bit.ly/GoogleAlerts5Dicas
    • No blog do CIO Market tem dicas interessantes de como aproveitar uma grande ferramenta do google, o Alerts.
  • Model em Ruby on Rails – Parte 02: http://bit.ly/NGczin
    • Segunda parte do artigo explicando um aspecto da aplicação da arquitetura MVC com Ruby on Rails.
  • Uma introdução ao gulp: http://bit.ly/1cCsR4S
    • Saiba mais sobre esse automatizador de tarefas baseado no node.js
  • Desvendando os “Custom Post Types”: http://bit.ly/1iMneoz
    • Para iniciantes e intermediários em wordpress entenderem melhor como personalizar o back end de posts no wordpress.
  • SWX na Startup and Makers da Campus Party 2014: http://bit.ly/1bPGgmy
    • Confira como foi a participação da SWX na Campus Party 2014.
  •  1º Fórum de Inovação, Propriedade Intelectual e Transferência de Tecnologia do IFS (FIPITT) – http://bit.ly/1nwdZqf
    • A SWX participa deste fórum como case de sucesso. Se vc estiver em Aracaju no dia 18/02 apareça no IFS e veja a palestra de Vinicius.

Tags | , , , , , , , , ,

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 | , ,