@SatinAndrey

Почему перестал работать browser sync?

Добрый день!
Проблема такова: во время работы, в половину свёрстанной страницы, вдруг перестал перезагружаться браузер при изменении html кода
Что делал и не дало результата:
- Попробовал вставить другой gulp файл
- Заменил baseDir: 'app' на baseDir: './app'
В общем не знаю что делать, и очень надеюсь на вашу помощь!
var gulp = require('gulp'), // Подключаем Gulp
    less = require('gulp-less'), //Подключаем Sass пакет,
    browserSync = require('browser-sync'), // Подключаем Browser Sync
    concat = require('gulp-concat'), // Подключаем gulp-concat (для конкатенации файлов)
    uglify = require('gulp-uglifyjs'), // Подключаем gulp-uglifyjs (для сжатия JS)
    cssnano = require('gulp-cssnano'), // Подключаем пакет для минификации CSS
    rename = require('gulp-rename'), // Подключаем библиотеку для переименования файлов
    del = require('del'), // Подключаем библиотеку для удаления файлов и папок
    imagemin = require('gulp-imagemin'), // Подключаем библиотеку для работы с изображениями
    pngquant = require('imagemin-pngquant'), // Подключаем библиотеку для работы с png
    cache = require('gulp-cache'), // Подключаем библиотеку кеширования
    autoprefixer = require('gulp-autoprefixer'), // Подключаем библиотеку для автоматического добавления префиксов
htmlmin = require('gulp-htmlmin'),
csso = require('gulp-csso'),
uncss = require('gulp-uncss'),
csscomb = require('gulp-csscomb'),
imageminJpegRecompress = require('imagemin-jpeg-recompress'),
image = require('gulp-image');

gulp.task('less', function() {
    return gulp.src('app/less/**/*.less')
        .pipe(less())
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.reload({ stream: true }))
});

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

gulp.task('htmlmin', function() {
    return gulp.src('app/index.html')
        .pipe(htmlmin({ collapseWhitespace: true }))
        .pipe(gulp.dest('dist'))
});

gulp.task('scripts', function() {
    return gulp.src(['app/js/script.js'])
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('css-libs', ['less'], function() {
    return gulp.src('app/css/style.css')
        .pipe(csso())
        .pipe(cssnano())
        .pipe(csscomb({
            html: ['index.html']
        }))
        .pipe(uncss({
            html: ['app/index.html']
        }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('dist/css'))
});

gulp.task('watch', ['browser-sync'], function() {
    gulp.watch('app/less/**/*.less', ['less']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('clean', function() {
    return del.sync('dist');
});

gulp.task('img', function() {
    return gulp.src('app/img/**/*')
        .pipe(image({
            pngquant: true,
            optipng: true,
            zopflipng: true,
            jpegRecompress: true,
            mozjpeg: true,
            guetzli: false,
            gifsicle: true,
            svgo: true,
            concurrent: 10
        }))
        .pipe(imagemin())

        .pipe(gulp.dest('dist/img'));
});


gulp.task('build', ['clean', 'htmlmin', 'img', 'less', 'css-libs', 'scripts'], function() {


    var buildFonts = gulp.src('app/css/fonts/**/*')
        .pipe(gulp.dest('dist/css/fonts'))

    var buildCss = gulp.src('app/css/**/*')
        .pipe(gulp.dest('dist/css'))

    var buildJs = gulp.src('app/js/**/*')
        .pipe(gulp.dest('dist/js'))

});

gulp.task('clear', function(callback) {
    return cache.clearAll();
})

gulp.task('default', ['watch']);

Очень буду благодарен за помощь!
Напоминаю, раньше всё работало отлично
  • Вопрос задан
  • 259 просмотров
Пригласить эксперта
Ответы на вопрос 3
UnluckySerivelha
@UnluckySerivelha
Замените это:
gulp.task('watch', ['browser-sync'], function() {
    gulp.watch('app/less/**/*.less', ['less']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});


на это:
gulp.task('watch', function() {

    browserSync.init({
        server: "app"
    });

    gulp.watch('app/less/**/*.less', ['less']);
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});
Ответ написан
ghostr1der
@ghostr1der
учусь быть крутым front-end разработчиком :)
тоже была такая проблема. решил так:
gulp.task('browser-sync', function() {
	browserSync({ server: true, notify: false });
});

но у меня baseDir была та же в которой галпфайл... т.е. пустое значение было
Ответ написан
AskMy
@AskMy
иногда решаю задачки и задаю глупые вопросы
я браузер-синк вообще не куда не подключал
просто устанавливал его => npm install -g browser-sync
и потом говорил ему что бы он следил за изменениями во всех файлах => browser-sync start --server --files *"."*
и всё

в gulpfile.js его не подключал ни разу
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.
Biganto Москва
от 130 000 до 130 000 руб.
21 авг. 2018, в 14:23
350000 руб./за проект
21 авг. 2018, в 13:54
5000 руб./за проект
21 авг. 2018, в 13:30
5000 руб./за проект