Partials, layouts, etc. only updating when pages are updated

[w-biggs]

Hey all. I'm using Panini alongside BrowserSync and am having an issue. When I update partials or layouts, running Panini is not applying those updates to the outputted files; however, when I then update the page file, those partials and layouts all suddenly update. I'm not sure why this is; I've messed around with panini.refresh but I'm not sure that's what I'm looking for. Here's my gulpfile:

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var panini = require('panini');
//var debug = require('gulp-debug');

gulp.task('sass', function() {
  return gulp.src("./dev/scss/*.scss")
      .pipe(sass()).on('error', sass.logError)
      .pipe(gulp.dest("./dist/css"))
      .pipe(browserSync.stream());
});

gulp.task('copy-css', function() {
  return gulp.src("./dev/css/*.css")
    .pipe(gulp.dest("./dist/css"))
});

gulp.task('compile-html', function() {
  return gulp.src("./dev/pages/**/*.html")
    .pipe(panini({
      root: './dev/pages/',
      layouts: './dev/layouts/',
      partials: './dev/partials/',
      data: './dev/data/'
    }))
    .pipe(gulp.dest("./dist"))
});

gulp.task('copy-js', function() {
  return gulp.src("./dev/js/*.js")
    .pipe(gulp.dest("./dist/js"))
});

gulp.task('copy-img', function() {
  return gulp.src("./dev/img/*")
    .pipe(gulp.dest("./dist/img"))
});

gulp.task('compile', gulp.parallel('sass', 'copy-css', 'compile-html', 'copy-js', 'copy-img'));

gulp.task('serve', function() {

  browserSync.init({
    server: "./dist"
  });

  gulp.watch("./dev/scss/*.scss", gulp.series('sass'));
  gulp.watch("./dev/**/*.html").on('change', gulp.series('compile-html', browserSync.reload));
  gulp.watch("./dev/js/*.js").on('change', gulp.series('copy-js', browserSync.reload));
});

gulp.task('default', gulp.series('serve'));

Thanks all.

[gakimball]

panini.refresh() is definitely what you're looking for. It reloads the internal cache of layouts/pages/partials/helpers.

The Foundation ZURB Template has an example of it in action.

There's a task:

function resetPages(done) {
  panini.refresh();
  done();
}

And then a set of watchers that run the above task, and a page compiling task in sequence:

gulp.watch('src/{layouts,partials}/**/*.html').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/data/**/*.{js,json,yml}').on('all', gulp.series(resetPages, pages, browser.reload));
gulp.watch('src/helpers/**/*.js').on('all', gulp.series(resetPages, pages, browser.reload));

Let me know if this helps!

[w-biggs]

That worked perfectly. Not sure what I was doing before that caused that to not work... thanks!!