我遇到的最初问题是该任务运行了 x 次,因为其中存在的文件数量src.pages
,我通过添加“就地更改”插件来修复这个问题,以比较源文件的最后修改日期。这意味着如果修改的日期没有改变,那么它就不会运行,或者如果它已经改变,那么它就会运行,但只是必要的次数。
因为插件只检查传递到流中的目录的文件,这意味着它不会检查里面的文件src.templates
,这本质上是我的 .html 部分文件文件夹。我运行的解决方法是让单独的任务监视部分文件更改,但不运行任何比较功能,这意味着我仍然遇到任务运行多次的原始问题。
更新:这是我的 gulpfile 的精简版本,其中包含与我的问题相关的所有内容:
var fileFormat = 'html',
fileExt = '.' + fileFormat;
var src = {
pages: 'src/pages/**/*' + fileExt,
templates: 'src/templates/**/*' + fileExt,
};
var dist = {
pages: './',
css: './',
};
var config = {
templates: ['src/templates/', 'src/partials/'],
pagesWatch: './*' + fileExt, // Directory where pages are output
};
// Browser Sync with code/HTML injection
function bs() {
browserSync.use(htmlInjector, {
files: dist.pages + '*' + fileExt
});
browserSync.init({
server: dist.pages,
files: dist.css + '*.css',
watchOptions: {
awaitWriteFinish: {
stabilityThreshold: 500
}
}
});
}
function nunjucksPages() {
nunjucksRender.nunjucks.configure([src.templates]);
return gulp.src([src.pages])
.pipe(changedInPlace())
.pipe(nunjucksRender({
path: config.templates,
ext: fileExt
}))
.pipe(gulp.dest(dist.pages))
}
// Use CommonJS 'exports' module notation to declare tasks
exports.nunjucksPages = nunjucksPages;
exports.bs = bs;
function watch() {
gulp.watch([src.pages, src.templates], gulp.series(nunjucksPages));
gulp.watch(config.pagesWatch, gulp.series(htmlInjector));
}
// Runs all the required tasks, launches browser sync, and watches for changes
var build = gulp.series(clean, gulp.parallel(nunjucksPages));
var run = gulp.parallel(bs, watch);
gulp.task('default', gulp.series(build, run));
编辑澄清:我有一个任务监视页面和模板目录的更改,一旦完成,它就会运行该nunjucksPages
功能。在 nunjucks 编译 HTML 后,浏览器同步将检测到这一点并注入 HTML(我的代码中的第二个监视任务)。
我目前的解决方法是复制两个 nunjucks 函数,并独立运行它们 - 具有缓存的页面功能(单次重新加载,问题已修复!),以及没有缓存的模板功能(每 X 数量的页面重新加载) .
相关问题和评论:https ://github.com/carlosl/gulp-nunjucks-render/issues/47#issuecomment-240962074