How to sync folders in Gulp?

Question

gulp.js

I used all packages from npm. gulp-sync-dir works best.
I have the following source structure:
src
--img
----logo1.png
----logo2.png
--pug
----index.pug
----about.pug
--scss
----main. scss
----variables.scss
And output:
dist
--img
----logo1.png
----logo2.png
--css
----main.css
--index.html
--about.html
And such sycnDir task settings:

var syncDir = require('gulp-sync-dir');

gulp.task('sync-dir', function () {
  syncDir({
    src: 'src',
    target: 'dist',
    exclude: ['*.html', '*.css'],
  });
});

And accordingly gulp.watch:

gulp.task('watch', function () {
  gulp.watch('src/pug/**/*', ['pug']);
  gulp.watch('src/scss/**/*', ['scss']);
  gulp.watch('src/img/**/*', ['img', 'sync-dir']);
});

The first build of the project is done correctly, the folders are compared and all unnecessary files are removed from the folders. But as soon as watch'er turns on, and for example, I delete the logo2.png image from the src/img folder, the logo2.png image is deleted from the dist/img folder and everything is OK, but the dist/css folder and index files are also deleted .html , about.html . How to solve the problem?