Nunjucks模板刷新

Question

我一直在使用PHP来做服务器端的包含，但我的站点上的许多页面可能是静态的，并且受益于自动生成静态的构建工作流。

Nunjucks和Gulp是我的选择，通过扩展布局，包括，从变量传递数据等，一切都运行得很好。

当我更新一个页面时，浏览器同步使我能够自动更新所有资源的连接浏览器(我已经剔除了不必要的任务)，除了对我的双节棍文件的更改。刷新浏览器无济于事。

在使用已更改模板的页面上进行更改是该单个页面的一种解决方案。重新启动服务器是使用模板更改更新所有页面的另一种解决方案。

我已经添加了一个手表来尝试解决这个问题。它既不会产生错误，也不会给出预期的结果。

我可以接受这一点，但如果有人能提供帮助的话，看到这些模板更新就太好了。

/* Gulpfile.js */
const gulp                      = require('gulp'),
      del                       = require('del'),
      plumber                   = require('gulp-plumber'),
      browserSync               = require('browser-sync').create(),
      nunjucksRender            = require('gulp-nunjucks-render'),

      src_folder                = './src/',
      dest_folder               = './dest/';

gulp.task('clear', () => del([ dest_folder ]));

gulp.task('html', () => {
  return gulp.src([ src_folder + 'html/**/*.html' ], {
    since: gulp.lastRun('html')
  })
    .pipe(gulp.dest(dest_folder))
    .pipe(browserSync.stream());
});

gulp.task('nunjucks', () => {
  return gulp.src([ src_folder + 'html/**/*.html'], {
    //base: src_folder + 'views',
    since: gulp.lastRun('nunjucks')
  })
    .pipe(plumber())
    .pipe(nunjucksRender({
      path: ['src/views']
    }))
    .pipe(gulp.dest(dest_folder))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('build', gulp.series('clear', 'html', 'nunjucks'));

gulp.task('dev', gulp.series('html', 'nunjucks'));

gulp.task('serve', () => {
  return browserSync.init({
    server: { baseDir: [ 'dest' ] },
    port: 3000,
    open: false
  });
});

gulp.task('watch', () => {

  const watch = [
    src_folder + 'html/**/*.html',
    src_folder + 'views/**/*.njk'
  ];

  gulp.watch(watch, gulp.series('dev')).on('change', browserSync.reload);

  /* My failed attempt to see template updates */
  gulp.watch(src_folder + 'views/**/*.njk').on('change', gulp.series('nunjucks', 'html', function (done) {
     console.log('Has my process completed?');
      done();
  }));

});

gulp.task('default', gulp.series('build', gulp.parallel('serve', 'watch')));

Answer 1

好吧，我花了一段时间才找到这个问题。这只是一个从以下代码中删除一段代码的例子：

  return gulp.src([ 'glob'], {
    since: gulp.lastRun('taskName')
  })

要这样做：

  return gulp.src('glob')

我在看我的HTML和模板。正在浏览器中重新加载对HTML文件所做的更改...但对模板的任何更改都不会更新。

这归功于lastRun()方法。我添加它是为了提高性能。在更新模板然后调用nunjucks任务时，lastRun忽略了HTML页面，因为它们没有更改。

有没有可能在不破坏模板更新的情况下获得性能提升？

我不知道，除了用相应的观察器创建了两个不同的任务，一个用于HTML页面，使用lastRun()，另一个用于不使用它的模板。