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.