Nunjucks模板刷新

Question

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

Nunjucks and Gulp是我的选择，并且在扩展布局，包括从变量传递数据等方面一切正常。

当我更新页面时，通过浏览器同步，我可以为所有资源（我删除了不必要的任务）自动更新连接的浏览器，但对nunjucks文件所做的更改除外。刷新浏览器无济于事。

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

我添加了手表以尝试解决此问题。它不会产生错误，也不会给出期望的结果。

我可以接受这个，但是如果有人可以帮助的话，很高兴看到这些模板更新。

/* 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()，另一个用于其模板而不使用它。