javascript - 使用Jade的功能改变了吗？

当我更改.jade文件时，我要Gulp任务仅针对该文件而不是所有文件运行。为此，我正在使用gulp-changed。直到我对影响全局布局的文件进行更改（例如_header.jade，_layout.jade）之前，它都可以正常工作。当我对该文件进行更改时，什么也没有发生。我所有的布局文件标题前均带有_。我该如何解决这个问题？

这是我的gulpfile一些行

gulp.task('jade', function() {
return gulp.src('dev/templates/**/!(_)*.jade')
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(changed('public', {extension: '.html'}))
    .pipe(jade({
        pretty: true,
    }))
    .pipe(gulp.dest('public'))
    .pipe(browserSync.reload({
        stream: true
    }));
});

gulp.task('watch', function() {
    gulp.watch('dev/templates/**/*.jade', gulp.series('jade'));
});

最佳答案

我要做的第一件事是将玉器编译任务重构为一个单独的函数。这样就可以参数化玉器编译，以便可以在您选择的一个或多个文件上运行它：

function compileJade(files) {
  return gulp.src(files, {base:'dev/templates'})
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(jade({
        pretty: true,
    }))
    .pipe(gulp.dest('public'))
    .pipe(browserSync.reload({
        stream: true
    }));
}

您现有的jade任务现在只需调用该函数即可：

gulp.task('jade', function() {
  return compileJade('dev/templates/**/!(_)*.jade');
});

如果更改的文件是部分文件（以_开头），则我们需要确定哪些其他文件受该更改影响。 jade-inheritance库可以帮助实现这一点：

var JadeInheritance = require('jade-inheritance');
var path = require('path');

function isPartial(file) {
  return path.basename(file).match(/^_.*/);
}

function findAffectedFiles(changedFile) {
  return new JadeInheritance(changedFile, 'dev/templates', {basedir: 'dev/templates'})
    .files
    .filter(function(file) { return !isPartial(file); })
    .map(function(file) { return 'dev/templates/' + file; })
}

最后，每当文件更改时，我们仅对受影响的文件调用compileJade函数：

gulp.task('watch', function() {
  gulp.watch('dev/templates/**/*.jade').on('change', function(changedFile) {
    return compileJade(isPartial(changedFile) ? findAffectedFiles(changedFile) : changedFile);
  });
});