Blog - Luiz Gustavo Web

Neste espaço me dedico a escrever artigos sobre GNU/Linux e desenvolvimento web.
Sinta-se à vontade.

Poupe tempo com gulp-changed

09 de Novembro de 2017

Ao utilizarmos um automatizador de tarefas front-end em projetos que dispõe de muitos assets (especialmente imagens), lidamos com o excessivo tempo que a operação leva a ser concluída, independentemente do número de tarefas no gulpfile.

Isto pode ser evitado com um pacote npm chamado gulp-changed. A descrição do pacote diz por si só: Only pass through changed files. Ou seja, somente arquivos modificados é levado em conta ao realizar suas tarefas.

Para instalar em seu projeto, execute o seguinte comando:

npm install gulp-changed


Em seguida, importe ele para seu gulpfile:

const changed = require('gulp-changed');


Com a constante changed você pode incluir o pacote em suas tasks.

Gulp-changed requer o diretório de destino como argumento ao ser invocado. Seu papel é comparar a data de modificação do arquivo em iteração com a data de modificação do arquivo no diretório de destino especificado.

No exemplo abaixo, temos uma task chamada images que serve para otimizar as imagens do projeto.

const gulp = require('gulp');
const changed = require('gulp-changed');
const optimize = require('gulp-image');

const srcImages = 'src/img/**/*.*';
const distImages = 'dist/img';

gulp.task('images', function(){
return gulp.src(srcImages)
.pipe(changed(distImages))
.pipe(optimize())
.pipe(gulp.dest(distImages));
});

Antes do algoritmo invocar optimize para otimizar o peso das imagens, é executado changed para verificar se o arquivo em iteração foi modificado. Se sim, a imagem é otimizada. Caso contrário, pulamos para a próxima imagem, diminuindo então o tempo da tarefa.

© 2006 - 2018