#gulp #pug #gulp_watch
В приведённой ниже файловой подсистеме файл partial1.pug является частью test1.pug
(включён в него через include), а файл partial2.pug - полностью самостоятельный:
📁 pug
test1.pug
test2.pug
📁 partials
partial1.pug
test1.pug
doctype html
html
head
title Test 1
body
h1 Test 1
include partials/partial1.pug
Вот, какого результата я хочу в результате написания gulp-таска:
отредактировали test1.pug → скомпилировался только test1.pug
отредактировали partial1.pug→ скомпилировался только test1.pug
отредактировался test2.pug → скомпилировался только test2.pug
В следующем gulp-таске, при редактировании одного из partial1.pug или partial2.pug
каждый раз компилироваться будут оба:
gulp.task('pug', () => {
return gulp.src('pug/*.pug')
.pipe(pug())
.pipe(gulp.dest('dist'))
});
Пытаясь решить эту проблему, мы можем добавить {since: gulp.lastRun('pug')}:
gulp.task('pug', () => {
return gulp.src('pug/*.pug', {since: gulp.lastRun('pug')})
.pipe(pug())
.pipe(gulp.dest('dist'))
});
Тогда инкрементальной сборке (с использованием gulp-watch) начиная со второго, автоматического
запуска таска pug будет скомпилирован только отредактированный файл. Однако, если мы
отредактируем partial1.pug, то ничего откомпилировано не будет (оно и понятно: test1.pug
же не менялся).
Изменение glob-паттерна на 'pug/**/*.pug' тоже желаемого результата не даст:
Если установить такой паттерн для gulp-watch, то после редактирования partial1.pug
запуск таска pug произойдёт, но {since: gulp.lastRun('pug')} не пропустит файл test1.pug.
Если установить такой паттерн для самого таска pug, то partial1.pug будет компилироваться
в отдельный файл, чего нам не нужно.
Как же быть?
Ответы
Ответ 1
var pathJsChangeFile = '';
gulp.task('watch', function() {
gulp.watch(paths.pathWeb + '/js/**/*.js', ['jsWathc']).on('change', function(event) {
pathJsChangeFile = event.path;
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
gulp.task('jsWathc', function() {
return gulp.src(pathJsChangeFile)
..//
.pipe(gulp.dest(paths.pathDist + dest + ''))
})
не идельное решение но работает
Ответ 2
gulp.task('pug', () => {
return gulp.src('pug/*.pug')
/* https://www.npmjs.com/package/gulp-newer */
.pipe(newer({
dest: 'dist',
extra: './app/{components,helpers,layouts,partials}/**/*.*'
}))
.pipe(pug())
.pipe(gulp.dest('dist'))
});
или плагин Emitty
