Как отслеживать и пересобирать только измененные файлы .pug в Gulp?

Для отслеживания и автоматической пересборки только измененных файлов .pug в Gulp можно использовать плагин gulp-changed.

Первым шагом, установите плагин gulp-changed при помощи npm, выполнив следующую команду в терминале:

npm install --save-dev gulp-changed

Далее, добавьте следующий код в ваш файл gulpfile.js:

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

const paths = {
  pugFiles: 'src/**/*.pug', // путь к исходным файлам .pug
  dest: 'dist' // путь для сохранения собранных файлов
};

// задача для отслеживания и пересборки измененных файлов .pug
gulp.task('pug', function() {
  return gulp.src(paths.pugFiles)
    .pipe(changed(paths.dest, { extension: '.html' })) // фильтруем только измененные файлы
    .pipe(pug()) // компилируем .pug в .html
    .pipe(gulp.dest(paths.dest)); // сохраняем результат
});

// задача для отслеживания изменений в файлах .pug
gulp.task('watch', function() {
  gulp.watch(paths.pugFiles, gulp.series('pug')); // запускаем задачу 'pug' при изменении файлов .pug
});

// задача по умолчанию, запускает задачу 'watch'
gulp.task('default', gulp.series('watch'));

Теперь, когда вы запускаете команду "gulp" в терминале, Gulp будет следить за изменениями в файлах .pug в папке src и автоматически пересобирать только измененные файлы, сохраняя результат в папку dist. Это осуществляется с использованием плагина gulp-changed, который сравнивает время изменения исходного и целевого файла и фильтрует только измененные файлы. Затем, используется плагин gulp-pug для компиляции файлов .pug в .html, и результат сохраняется при помощи gulp.dest в папку dist.

Вы можете настроить пути (paths) в соответствии с вашим проектом.