gulp: как перекомпилировать только изменённые файлы, разбитые на несколько файлов (на примере pug)

#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