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