Gulp not accessing targeted folder

Question

So, I have some landing pages files and previously my folder structure is

Old Folder Structure

landing-page
    |-project1
        |-css
        |-js
        |-scss
        |-All .html files
    |-project2
        |-css
        |-js
        |-scss
        |-All HTML files
    |-gulpfile.js
    |-package.json

gulpfile.js

For Project 1

gulp.task('watch:project1',  gulp.series(function() {

    browserSync.init({
        server: {
          baseDir: 'project1'
        },
    })

}));

For Project 2

gulp.task('watch:project2',  gulp.series(function() {

    browserSync.init({
        server: {
          baseDir: 'project2'
        },
    })

}));

New Folder Structure

landing-page
    |-css
    |-js
    |-project1 ----> Contains HTML pages of project 1 
    |-project2 ----> Contains HTML pages of project 2
    |-scss
    |-gulpfile.js
    |-package.json

Now, when I tried to run the Watch function it works but did not loading STYLE and JS files with error Cannot GET /

Updated gulpfile Position

landing-page
    |-css
    |-js
    |-project1 ----> Contains HTML pages of project 1 
    |-project2 ----> Contains HTML pages of project 2
    |-scss
|-gulpfile.js
|-package.json

gulpfile.js

gulp.task('watch:demo1',  gulp.series(function() {

    browserSync.init({
        server: {
          baseDir: '../landing-page/',
          index: "../landing-page/project1/index.html"
        }
    })

}));

The watch code mentioned above only serve the index file.

So, I have updated my code

gulp.task('watch:demo1',  gulp.series(function() {

    browserSync.init({
        server: {
          baseDir: '../landing-page/',
          index: "../landing-page/project1/index.html",
          directory: true
        }
    })

}));

It serves all the files like mentioned below in the image.

But, the problem is it did not directly serve a specific project. I mean if I run watch:demo1 it should serve project1 and if I run watch:demo2 it should serve project2