Компиляция измененных файлов Pug.js?

Question

[Adzhetygenov]

День добрый, тостерчане.
Использую шаблонизатор html - pug.js в связке с gulp. Написал таск

gulp.task("compile:views", function() {
	return gulp.src('source/pug/*.pug')
		.pipe($.plumber())
		.pipe($.pug({
			pretty: true
		}))
		.pipe(gulp.dest('build/'))
		.pipe($.notify( { title: 'Compile:views' , message: 'Compile:views task completed'} ))
});

Есть пара файлов article.pug и index.pug, в них инклудом идет _header.pug. Как сделать, чтобы при изменении любого partial компонента - компилировались файлы, которые включают в себя этот _header. Gulp-remember, gulp-changed, gulp-cached не работают. Либо у меня кривые руки. Пожалуйста, помогите, скоро начну брызгать слюной. Сижу 3 дня, не могу реализовать, вроде бы легкую задачу.
Спасибо.

Answer 1

[alvvi]

Никакого плагина не нужно, пользуемся стандартным уотчером gulp. На синтаксисе Gulp4 выглядеть будет так:
gulp.watch('app/**/*.pug', gulp.series('pug'));
Для Gulp3:
gulp.watch('app/**/*.pug', ['pug']);

Comments

[Adzhetygenov]

Спасибо за ответ, но при изменении одного файла - компилируются все. Если страниц много, то занимает эта лапша ~40сек.

[alvvi]

Adzhetygenov: вопрос немного вводит в заблуждение, вам надо кэширование настроить по сути. Тут возникает следующий вопрос, ответ на который и будет являтся ключом к решению: как gulp должен знать ДО компиляции, что изменения произойдут в определенном компилируемом файле, если include/extends обрабатываются именно компилятором pug. Задача не такая уж тривиальная, возможно стоит посмотреть в эту сторону, я всего лишь пробежался глазами, но там в описание упоминается кэширование и совместное использование с gulp-cached.

[Adzhetygenov]

С gulp-pug-inheritance пытался разобраться, с учетом того,что gulp-jade-inheritance в прошлом использовал и проблем с ним не было, но его собрат так и не хочет поддаваться. С кэшированием согласен, я делал так:
Кэшировал плагином gulp-cached, все, как бы хорошо, файл кэшируется, но дальше в потоке компиляции не происходит.

[alvvi]

Adzhetygenov: все верно, она не происходит, потому что считает, что файлы не изменились, поскольку include происходит на этапе с компиляцией, а кэшируем мы до этого, и gulp-cached просто не пускает файлы дальше. Допытывать gulp-pug-inheritance и gulp-filter, либо писать свой велосипед - единственный вариант.

Answer 2

[Олег]

Можете попробовать этот модуль, также у меня в сборке реализован подобный функционал (только если вам нравится БЭМ).