使用翡翠function与吞噬改变?

当我对.jade文件进行更改时,我希望Gulp任务只为该文件运行,而不是为所有文件运行。 为此,我正在使用gulp-changed 。 它工作正常,直到我更改影响全局布局的文件,例如_header.jade_layout.jade 。 当我对该文件进行更改时,什么都不会发生。 所有我的布局文件在标题之前都有_ 。 我该如何解决这个问题?

这是我的gulp文件的一些行

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

我要做的第一件事是把你的玉石编译任务重构成一个单独的函数。 这使您可以参数化您的玉石编译,以便您可以在您select的一个或多个文件上运行它:

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