javascript - 使用 Jade 功能进行 gulp 更改？

Question

当我对 .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'));
});

Answer 1

我要做的第一件事是将你的 jade 编译任务重构为一个单独的函数。这允许您参数化您的 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);
  });
});