Задать вопрос
jack_azizov
@jack_azizov
javascript

Почему не срабатывают изменения через browserSync?

Здравствуйте.

В чем моя проблема ?
Пытаюсь настроить маленькое окружение , для front-end'а. Чтобы при запуске таска watch , происходила слежка за файлами index.html и style.scss и чтобы стили компилировались в css и сохранялись в иной путь + хотел добавить автообновление страницы через browser Sync..

В общем установил плагины sass, browserSync через npm Файл индекс обновляется ,а файл scss не реагирует на изменения в браузере , хотя в консоли выводятся записи.
Самое интересное при сохранении/изменении файла style.scss консоль выдает записи , в браузере ничего не происходит(поменял например цвет фона на красный). Если перезапускаю gulp watch , он запускает заново страницу, но стили всё равно не применены. И только если я запущу вручную открою index.html и выберу запустить в браузере вот только там видны изменения стилей. Такое чувство что если я запускаю таск watch то стили отваливаются.

Снизу приложил фотографии, сначала сделал изменения в Html изменения появились в браузере, затем изменения сделал в scss. Стили компилируются.В консоли никаких ошибок не выводится.
59f2fdaa8ce66119792206.png59f2fdb09bf5e473430370.png59f2fce38c864624800209.png59f2fd3953825780231858.png59f2fd4058089548262174.png59f2fbb3bf9e5346955713.png
  • Вопрос задан
  • 1056 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
neuotq
@neuotq
Прокрастинация
Вы смотрите за изменениями в scss, а как же сам css который компилица после изменений в scss. Вот и выходит что дефакто ничего не поменялось и страницу перегружать не нужно. Добавляй слежение за итоговым скомпилированным css или папокй где он лежит, смотря что за проект будет.
UPD: выше пропустил, что у вас настроена инъекция.
мб взять из оригинала и под вас передалать:
var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

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

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Взлом автомобильной программы
19 апр. 2024, в 05:01
999999 руб./за проект
Ещё заказы