Partials, layouts, etc. only updating when pages are updated
w-biggs opened this issue · 2 comments
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.
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!
That worked perfectly. Not sure what I was doing before that caused that to not work... thanks!!