Gulp 4. Проблема с браузерной синхронизацией // Следующие задачи не были выполнены: браузерная синхронизация

Question

Не понимаю, в чем ошибка, прочитайте документацию в browser-sync, где gulp 4 действительно ничего об этом не написано. В документации gulp 4 также не понял (async). Как решить эту проблему. Благодарю. бла бла бла бла бла бла бла бла бла бла бла

 '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

Используйте это вместо:

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();
});

Обратите внимание на done - это простой способ указать завершение задачи для настройки синхронизации браузера. См. обратный вызов для завершения асинхронного сигнала .

---

Комментарий @ Dirk о неиспользовании .create() см.

Синтаксис Post 2.0.0 (рекомендуется)

Хотя вышеизложенное все еще поддерживается [ред. no create ()], теперь мы рекомендуем следующее вместо. Вызов .create () означает, что вы получаете уникальную ссылку и позволяет вам создать несколько серверов или прокси.

Из API документации .

Таким образом, использование create позволяет открывать несколько экземпляров browserSync - обслуживать разные файлы или просматривать / перезагружать разные файлы - но в более простых случаях не требуется.