使用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

我会做的第一件事是你的玉编译任务重构到一个单独的功能。这让你参数你的玉编译，这样你可以在你选择的一个或多个文件运行它：

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