How to write a task correctly?

Question

JavaScript

There are 3 tasks for sass, js and watch
The task is to make a default task for Gulp 4, so that when it starts, css, js files are immediately formed, and then watch and browser sync are launched.
PS If you write as shown below, then at startup and further changes in sass or js files, the corresponding tasks will be performed twice, but this is not necessary.

gulp.task('default', gulp.series(
   gulp.parallel('styles', 'scripts', 'images'),
   gulp.parallel('watch', 'browser-sync')
));

styles task examples

gulp.task('styles', function(){
   return gulp.src(source+'/'+syntax+'/**/*.'+syntax)
      .pipe(sass({ outputStyle: 'expanded' }).on("error", notify.onError()))
      .pipe(autoprefixer(['last 15 versions']))
      .pipe(cleancss({ level: { 1: { specialComments: 'all' } } }))
      .pipe(rename({ prefix: '', suffix: '.min' }))
      .pipe(gulp.dest(source+'/css'))
      .pipe(browserSync.stream())
});

scripts

gulp.task('scripts', function() {
   return gulp.src(source+'/js/**/*.js')
      .pipe(concat('scripts.js'))
      .pipe(uglify())
      .pipe(rename({prefix: '', suffix: '.min'}))
      .pipe(gulp.dest(source+'/js'))
      .pipe(browserSync.stream())
});

browser sync

gulp.task('browser-sync', function() {
   browserSync({
      server: {
         baseDir: source
      },
      notify: false,
   })
});

watch

gulp.task('watch', function() {
   gulp.watch(source+'/*.html')
   gulp.watch(source+'/'+syntax+'/**/*.'+syntax)
   gulp.watch(source+'/js/common.js')
});

Answer 1

Something about galp 4 has become a lot of questions, do not use the new version right away, wait for a while until the docks and uses cases appear, then just move on.

Answer 2

Maybe my example will help:

spoiler

gulp.task('server', function () {
server.init({
server: 'build/',
notify: false,
open: true,
cors: true,
ui: false
});
gulp.watch('source/sass/**/*.{scss,sass}', gulp.series('sass'));
gulp.watch('source/*.html', gulp.series('html', 'refresh'));
gulp.watch('source/js/*.js', gulp.series('js'));
});
gulp.task('build', gulp.series('clean', 'copy', 'html', 'sass', 'js'));
gulp.task('start', gulp.series('build', 'server'));

When I wrote it, I also tried to make a separate task for watch. But something did not work there, but it works if watch'ry is registered in the server task. Perhaps this is what you are looking for.