alex_shevch
@alex_shevch
Frontend Developer

Почему не работает browserSync?

Здравствуйте!
Не могу понять, почему не работает browserSync.
Уже по каким гайдам не делал, всё одно - при включении дефолтного таска открывает страницу, при изменении файлов пишет [Browsersync] Reloading Browsers..., но ничего не обновляет.
Помогите, пожалуйста, уже замучался.

Gulp -v
CLI version: 2.2.0
Local version: 4.0.2

"browser-sync": "^2.26.7",

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    babel = require('gulp-babel'),
    uglify = require('gulp-uglify'),
    cleanCSS = require('gulp-clean-css'),
    sourcemaps = require('gulp-sourcemaps'),
    del = require('del'),
    browserSync = require('browser-sync').create();

function scss() {
    return gulp.src('src/style.scss')
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(cleanCSS({
            level: 2
        }))
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
}

function js() {
    return gulp.src('src/script.js')
        .pipe(babel())
        .pipe(uglify({
            toplevel: true
        }))
        .pipe(gulp.dest("dist"))
        .pipe(browserSync.stream());
}

function clean() {
    return del(['dist/*'])
}

gulp.task('scss', scss);
gulp.task('js', js);

function reload(cb) {
    browserSync.reload();
    cb()
}

function watch() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
    gulp.watch('src/style.scss', scss);
    gulp.watch('src/script.js', js);
    gulp.watch('./index.html', reload)
}

gulp.task('watch', watch);

gulp.task('build', gulp.series(
    clean,
    gulp.parallel(scss, js)
));

gulp.task('default', gulp.series('build', 'watch'));


Весь проект - https://github.com/AeShevch/mg-order-form/blob/mas...
  • Вопрос задан
  • 2129 просмотров
Пригласить эксперта
Ответы на вопрос 3
Автору скорее всего уже не актуально. Но я только что потратил на такую же проблему два часа. Как оказалось, в html файле обязательно должен быть <body>
Ответ написан
Machinez
@Machinez
функция передаваемая в watch должна вызвать коллбэк или вернуть Promise.resolve(), browserSync.reload ничего такого не делает.
попробуй
function reload(cb) {
    browserSync.reload();
    cb()
}

function watch() {
    gulp.watch('./index.html', reload)
}
Ответ написан
@StockholmSyndrome
попробуйте
gulp.watch('./index.html').on('change', browserSync.reload);

вместо
gulp.watch('./index.html', browserSync.reload);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы