How to properly configure browser-sync to work with a large project?

Question

gulp.js

Good afternoon! Tell me how to properly configure browser-sync? There is a large project in which there are several html files. Folder sass, js, font - common for these html. When building, browser-sync only works with index.html, the rest of the pages are compiled and transferred to build, but they are not opened in browser-sync. And if you rename index.html to a different name - browser-sync gives an error cannot get.
Before that, I worked with smaller projects that had only 1 index.html and there were no such issues.
How do you work with projects that have multiple html files? How to open multiple different pages from one project in browser-sync?

Answer 1

Well, can manually open the desired page in the browser?

Answer 2

If I understand correctly (1 project, 2 versions (dev, production), then just create 2 tasks for watch:

//...
const bs = require('browser-sync').create();
//...

gulp.task('watch', () => {
    //...
});

gulp.task('watch-build', () => {
    bs.init({
        server: './build',
    });

    gulp.watch('index.html').on('change', bs.reload);
    //...
});