使用翡翠功能与吞咽-改变？

Question

当我对.jade文件进行更改时，我希望只为该文件运行Gulp任务，而不是对所有文件运行。为此，我正在使用gulp-changed。它运行良好，直到我对影响全局布局的文件进行更改，例如_header.jade、_layout.jade。当我对文件进行更改时，什么都不会发生。我所有的布局文件在标题之前都有_。我怎样才能解决这个问题？

这是我的文件几行

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

我要做的第一件事就是把你的玉石编译任务重构成一个单独的功能。它允许您参数化您的玉编译，以便您可以在您选择的一个或多个文件上运行它：

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);
  });
});