Gulp 4. The problem with browser-sync // The following tasks did not complete: browser-sync

Question

Do not understand what the error read documentation in browser-sync where gulp 4 there is really nothing written about it. In the documentation of gulp 4 also did not understand( async ). How to resolve this problem. Thanks. bla bla bla bla bla bla bla bla bla bla

 'default' errored after 23 ms
 The following tasks did not complete: browser-sync
 Did you forget to signal async completion?

var gulp        = require('gulp'),
      gutil         = require('gulp-util' ),
      sass          = require('gulp-sass'),
      browserSync   = require('browser-sync'),
      concat        = require('gulp-concat'),
      uglify        = require('gulp-uglify'),
      cleancss      = require('gulp-clean-css'),
      rename        = require('gulp-rename'),
      autoprefixer  = require('gulp-autoprefixer'),
      notify        = require('gulp-notify');

gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: 'app'
        },
        notify: false,
        // open: false,
        // online: false, // Work Offline Without Internet Connection
        // tunnel: true, tunnel: "projectname", // Demonstration page: http://projectname.localtunnel.me
    })
});

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

gulp.task('scripts', function() {
    return gulp.src([
        'app/libs/jquery/dist/jquery.min.js',
        'app/js/common.js',
        ])
    .pipe(concat('scripts.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/js'))
    .pipe(browserSync.reload({ stream: true }))
});

gulp.task('code', function() {
    return gulp.src('app/*.html')
    .pipe(browserSync.reload({ stream: true }))
});


    gulp.task('watch', function() {
        gulp.watch('app/'+syntax+'/**/*.'+syntax+'', gulp.parallel('styles'));
        gulp.watch(['libs/**/*.js', 'app/js/common.js'], gulp.parallel('scripts'));
        gulp.watch('app/*.html', gulp.parallel('code'))
    });
    gulp.task('default', gulp.parallel('watch', 'browser-sync'));

Answer 1

Use this instead:

gulp.task('browser-sync', function(done) {
    browserSync({
        server: {
            baseDir: 'app'
        },
        notify: false,
        // open: false,
        // online: false, // Work Offline Without Internet Connection
        // tunnel: true, tunnel: "projectname", // Demonstration page: http://projectname.localtunnel.me
    });
    done();
});

Note the done's - that is an easy way to indicate task completion for a browser-sync set-up. See callback to signal async completion.

---

For @Dirk's comment about not using .create() see

Post 2.0.0 syntax (recommended)

Whilst the above is still supported [ed. no create()], we now recommend the following instead. Calling .create() means you get a unique reference & allows you to create multiple servers or proxies.

From api documentation.

So using create allows to open multiple instances of browserSync - serving different files or watching/reloading different files - but is not necessary in simpler cases.