Gulp - Desenvolvendo um aplicativo

Nos capítulos anteriores, você estudou sobre a instalação do Gulp e os fundamentos do Gulp, que incluem o sistema de compilação do Gulp, gerenciador de pacotes, executor de tarefas, estrutura do Gulp, etc.

Neste capítulo, veremos o básico para o desenvolvimento de um aplicativo, que inclui o seguinte -

  • Declarando dependências necessárias
  • Criação de tarefa para as dependências
  • Executando a tarefa
  • Observando a tarefa

Declaração de Dependências

Ao instalar plug-ins para o aplicativo, você precisa especificar dependências para os plug-ins. As dependências são tratadas pelo gerenciador de pacotes, como bower e npm.

Vamos pegar um plugin chamado gulp-imageminpara definir dependências para ele no arquivo de configuração. Este plugin pode ser usado para compactar o arquivo de imagem e pode ser instalado usando a seguinte linha de comando -

npm install gulp-imagemin --save-dev

Você pode adicionar dependências ao seu arquivo de configuração, conforme mostrado no código a seguir.

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

A linha acima inclui o plug-in e está incluído como um objeto denominado imagemin.

Criação de tarefa para dependências

A tarefa permite uma abordagem modular para configurar o Gulp. Precisamos criar uma tarefa para cada dependência, que adicionaríamos à medida que localizássemos e instalássemos outros plug-ins. A tarefa Gulp terá a seguinte estrutura -

gulp.task('task-name', function() {
   //do stuff here
});

Onde 'task-name' é um nome de string e 'function ()' executa sua tarefa. O 'gulp.task' registra a função como uma tarefa dentro do nome e especifica as dependências de outras tarefas.

Você pode criar a tarefa para a dependência definida acima, conforme mostrado no código a seguir.

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

As imagens estão localizadas em src/images/**/*que é salvo no img_srcobject. É canalizado para outra função criada pelo construtor imagemin. Ele compacta as imagens da pasta src e copia para a pasta build chamandodest método com um argumento, que representa o diretório de destino.

Executando a Tarefa

O arquivo Gulp está configurado e pronto para ser executado. Use o seguinte comando no diretório do seu projeto para executar a tarefa -

gulp imagemin

Ao executar a tarefa usando o comando acima, você verá o seguinte resultado no prompt de comando -

C:\work>gulp imagemin
[16:59:09] Using gulpfile C:\work\gulpfile.js
[16:59:09] Starting 'imagemin'...
[16:59:09] Finished 'imagemin' after 19 ms
[16:59:09] gulp-imagemin: Minified 2 images (saved 80.81 kB - 16.9%)