时间戳

首页 > 解决方案 > Nunjucks 模板刷新

gulp - Nunjucks 模板刷新

问题描述

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

Nunjucks 和 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')));

标签： gulpbrowser-syncnunjucks

解决方案

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

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

对此：

  return gulp.src('glob')

我在看我的 HTML 和模板。对 HTML 文件的更改可以在浏览器中重新加载……但是对模板的任何更改都没有更新。

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

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

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

推荐阅读