I'm new to gulp. So, I was trying to do the regular stuff - css, js minification and image optimization using gulp. I did achieve the desired output. Now I am wondering what If I don't have to change the paths of the assets(css, js, images) in my index.html file manually and it works perfectly when placed/copied inside the dist folder using gulp? So how can I achieve that??

For example- ../dist/css/style.css in src index.html becomes css/style.css in dist index.html file and <img src="../dist/img/pic.webp" > becomes <img src="img/pic.webp" >

project
    |-dist
        |-css
        |-img
        |-js
        index.html
    |-src
        |-scss
        |-img
        |-js
        index.html
    gulp.js
    ...

Here's the code for copying the htmls from src to dist:

function copyHtml() {
    return gulp.src('src/*.html')
        .pipe(gulp.dest('dist'));

}