Pesquisa de site

Gulp - um kit de ferramentas para automatizar tarefas dolorosas no desenvolvimento

Gulp é um pequeno kit de ferramentas que automatiza tarefas repetitivas. Essas tarefas repetitivas geralmente são compilar arquivos CSS, JavaScript ou, basicamente, quando você usa uma estrutura que lida com arquivos JavaScript/CSS fora do padrão, você vai querer usar uma ferramenta de automação que captura esses arquivos, empacota-os e compila tudo para que seu navegador possa entender facilmente isto.

Gulp é útil para automatizar as seguintes tarefas:

  • Compilando arquivos JS e CSS
  • Atualizando a página do navegador ao salvar um arquivo
  • Execute um teste de unidade
  • Análise de código
  • Copiando arquivos modificados para um diretório de destino

Para controlar todos os arquivos necessários para criar um arquivo gulp, desenvolver sua ferramenta de automação ou automatizar tarefas, você precisa gerar um arquivo package.json. O arquivo contém basicamente uma explicação do que está dentro do seu projeto, quais dependências você precisa para fazer seu projeto funcionar.

Neste tutorial você aprenderá como instalar o Gulp e como automatizar algumas tarefas básicas para seus projetos. Usaremos npm – que significa gerenciador de pacotes de nó. Ele é instalado com Node.js, e você pode verificar se já instalou o Nodejs e o npm com:

node --version
npm --version

Caso ainda não o tenha instalado em seu sistema, recomendo que você verifique o tutorial: Instale a versão mais recente do Nodejs e do NPM em sistemas Linux.

Como instalar o Gulp no Linux

A instalação do gulp-cli pode ser concluída com npm usando o seguinte comando.

npm install --global gulp-cli

Se você deseja instalar o módulo gulp localmente (somente para o projeto atual), você pode usar as instruções abaixo:

Crie um diretório de projeto e navegue nele:

mkdir myproject
cd myproject

Em seguida, use o seguinte comando para inicializar seu projeto:

npm init

Depois de executar o comando acima, você receberá uma série de perguntas para dar um nome ao seu projeto, descrição da versão e outros. Por fim, confirme todas as informações que você forneceu:

Agora podemos instalar o pacote gulp em nosso projeto com:

npm install --save-dev gulp

A opção --save-dev diz ao npm para atualizar o arquivo package.json com o novo devDependencies.

Observe que devDependencies precisam ser resolvidas durante o desenvolvimento, enquanto as Dependências durante o tempo de execução. Como o gulp é uma ferramenta que nos auxilia no desenvolvimento, ele precisa ser resolvido na hora do desenvolvimento.

Criar arquivo Gulp

Agora vamos criar um gulpfile. As tarefas que queremos executar serão encontradas nesse arquivo. Ele é carregado automaticamente ao usar o comando gulp. Usando um editor de texto, crie um arquivo chamado gulpfile.js. Para os fins deste tutorial, vamos criar um teste simples.

Você pode inserir o seguinte código em seu gulpfile.js:

var gulp = require('gulp');

gulp.task('hello', function(done) {
        console.log('Hello world!');
        done();
});

Salve o arquivo e agora tente executá-lo com:

gulp hello

Você deverá ver o seguinte resultado:

Aqui está o que o código acima faz:

  • var gulp=require(‘gulp’); – importa o módulo gulp.
  • gulp.task(‘hello’, function(done) { – define uma tarefa que estará disponível na linha de comando.
  • console.log(‘Hello world!’); – simplesmente imprime “Hellow world! ” na tela.
  • done(); – usamos esta função de retorno de chamada para instruir o gulp que nossas tarefas foram concluídas.

É claro que o texto acima foi apenas um exemplo para mostrar como o gulpfile.js pode ser organizado. Se quiser ver as tarefas disponíveis em seu gulpfile.js, você pode usar o seguinte comando:

gulp --tasks

Plug-ins Gulp

Gulp tem milhares de plugins disponíveis, todos oferecendo funcionalidades diferentes. Você pode verificá-los na página do plugin do Gulp.

Abaixo utilizaremos o plugin minify-html em um exemplo mais prático. Com a função abaixo, você pode reduzir arquivos HTML e colocá-los em um novo diretório. Mas primeiro, instalaremos o plugin gulp-minify-html:

npm install --save-dev gulp-minify-html

Você pode fazer com que seu gulpfile.js fique assim:

cat gulpfile.js
Saída de amostra
// including plugins
var gulp = require('gulp')
, minifyHtml = require("gulp-minify-html");

// task
gulp.task('minify-html', function (done) {
    gulp.src('./src/*.html') // path to your files
    .pipe(minifyHtml())
    .pipe(gulp.dest('./dest'));
    done()
});

Então você pode reduzir os arquivos HTML usando os seguintes comandos.

gulp minify-html
du -sh /src dest/

Conclusão

Gulp é um kit de ferramentas útil que pode ajudá-lo a melhorar sua produtividade. Se você está interessado nesta ferramenta recomendo fortemente que você verifique sua página de documentação, que está disponível aqui.