Livereload не работает в Chrome с помощью Gulp, что мне не хватает

Я пытаюсь использовать Livereload с помощью Gulp, Sublime Text 3 и Chrome, но по какой-то причине это не работает. Вот что я сделал.

  1. Установил расширение Livereload в Chrome.
  2. Установил gulp-livereload.
  3. Настройте gulpfile.js.
  4. Побежал глоток.

Что мне здесь не хватает? Нужно ли устанавливать плагин Livereload для Sublime Text 3?

К сведению: кнопка «Параметры» в расширении Livereload в Chrome неактивна.

Мой глоток:

var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
       .pipe(livereload());
});

gulp.task('watchMyStyles', function() {
    livereload.listen();
    gulp.watch('sass/*.scss', ['myStyles']);
});

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

Файл пакета:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}

google-chrome gulp livereload gulp-sass gulp-livereload
person fs_tigre    schedule 04.09.2015    source источник

Ответы (4)


arrow_upward
23
arrow_downward

Это то, что я сделал, что сработало. Я использовал плагин gulp-connect вместо gulp-livereload.

  1. Установил расширение Livereload в Chrome.
  2. Установлен плагин npm install gulp-connect.
  3. Настройте gulpfile.js (см. код ниже).
  4. Откройте браузер и перейдите по URL-адресу http://localhost:8080/.
  5. Щелкните значок ливреоода в браузере.
  6. Запустите глоток.
  7. Сделанный.

Мой глоток:

var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var connect = require('gulp-connect');

    
gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload());
});

gulp.task('connect', function() {
    connect.server({
        livereload: true
    });
});

gulp.task('watchMyStyles', function() {
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles', 'connect']);

Файл пакета:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-sass": "^2.0.4"
  }
}

Справочные ссылки:

https://www.youtube.com/watch?v=KURMrW-HsY4&index=7&list=PLRk95HPmOM6PN-G1xyKj9q6ap_dc9Yckm

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

person fs_tigre    schedule 05.09.2015
comment
Я сделал то же самое, понятия не имею, почему gulp-livereload не работает - person ambodi; 26.10.2015
comment
У меня была такая же проблема с gulp-livereload и chrome, даже с включенными URL-адресами файлов, отмеченными галочкой в ​​настройках расширения chrome livereload. Переключение на gulp-connect сработало - person Ryan Castner; 11.05.2016
comment
Спасибо за это — gulp-connect легко сработал у меня с первого раза. - person Scott Simpson; 12.07.2016
comment
Это на самом деле не отвечает на вопрос. Проверьте ответ Криса, чтобы действительно исправить LiveReload. - person Felix Turner; 02.09.2019
comment
работает отлично. ты спас мой день - person princebillyGK; 24.01.2021

arrow_upward
12
arrow_downward

При локальной разработке убедитесь, что для параметра LiveReload в настройках расширений Chrome установлен флажок Разрешить доступ к URL-адресам файлов.

Возможно, у меня была та же проблема - когда я щелкал значок LiveReload, он просто ничего не делал.

person thunderdunk    schedule 22.01.2016

arrow_upward
6
arrow_downward

Решающим моментом для меня был перезапуск браузера. Вам не нужно добавлять gulp-connect, чтобы это работало — просто сделайте следующее:

  1. Установите расширение livereload для Chrome.
  2. Настройте gulpfile и package.json (ОП сделал это правильно)
  3. Перейдите на страницу chrome://extensions и установите флажок "Разрешить доступ к URL-адресам файлов".
  4. Перезапустите хром!
  5. Перейдите на страницу, которую вы тестируете, и щелкните значок livereload. Вы должны заметить, что круг в середине значка становится заполненным.
  6. Начните редактировать код и поразитесь ценным секундам, сэкономленным функцией автоматической перезагрузки.
person Chris    schedule 13.08.2016

arrow_upward
2
arrow_downward

Извините, что освещаю основы, но мы все время от времени попадаем в ловушку.

вы нажали кнопку livereload в хроме?

если сервер перезагрузки в реальном времени работает, в его середине будет сплошная серая точка.

вот так: livereload chrome extension on

Если нет, вы получите такую ​​ошибку:

«Не удалось подключиться к серверу LiveReload. Убедитесь, что запущен LiveReload 2.3 (или более поздней версии) или другой совместимый сервер».

person Tracey Turn    schedule 05.09.2015