gulp and pug - unable to parse nested partials

I am using gulp with gulp-pug so that I can split my template into reusable components. Pug grabs any existing *.pug(jade) files and converts them to generic html files on browser-sync and/or project build (in my case).

gulp.task('views', function buildHTML() {
return gulp.src('src/views/*.pug')
    .pipe(changed('src', {
        extension: '.html'
    }))
    .pipe(pug({
        pretty: true
    }))
    .pipe(gulp.dest('src/'))
});

gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
    gulp.watch('src/views/**/*.pug', ['views']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/views/**/*.pug', browserSync.reload);
    gulp.watch('src/*.html', browserSync.reload);
    gulp.watch('src/js/**/*.js', browserSync.reload);
});

gulp.task('default', function (callback) {
    runSequence(['views', 'sass', 'browserSync', 'watch'],
       callback
    );
});

And this is the basic pug index with included partials

doctype html
html(lang='en')
  include partials/head.pug
  body
    <!-- content -->
    include partials/footer.pug
    include partials/scripts.pug

Everything is running smoothly except for one thing, my views folder structure is as follows:

views
--- partials
    --- *
    --- *
    --- etc.
--- index

When I make changes in one of my partials (the pug files inside the partials folder) and I save, the live-reload functionality works as expected, but the *.pug files are not being parsed. When I save the index.pug however, files are converted and the page loads the new content.

What am I doing wrong and where?

P.S. Even when editing the index file, I have to manually refresh the page from time to time so it can render the page instead of a blank slate.

A tiny, but big mistake here. I was also live-reloading the pug files, which causes some confusion to the parser.

My watch task looked like this:

gulp.task('watch', ['browserSync', 'views', 'sass'], function () {
    gulp.watch('src/scss/**/*.scss', ['sass']);
    gulp.watch('src/views/**/*.pug', ['views']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('src/views/**/*.pug', browserSync.reload);
    gulp.watch('src/*.html', browserSync.reload);
    gulp.watch('src/js/**/*.js', browserSync.reload);
});

Now, I removed this line:

gulp.watch('src/views/**/*.pug', browserSync.reload);

which made no sense, but I found it.

You only need to watch for changes in the html files.