Livereload не работает в Chrome, используя Gulp, чего мне не хватает

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

  1. установлено расширение Livereload в Chrome.
  2. установлен залпом-livereload.
  3. настройка gulpfile.js.
  4. побежал залпом.

что я пропустила? Нужно ли устанавливать плагин Livereload для Sublime Text 3?

FYI-кнопка Options в расширении Livereload в Хром посерел.

Мой Gulpfile:

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"
  }
}
8
google-chrome gulp gulp-livereload gulp-sass livereload

4 ответов

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

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

мой Gulpfile:

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

20

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

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

9

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

  1. установите расширение livereload chrome
  2. настройте свой gulpfile и пакет.json (OP сделал это правильно)
  3. на chrome: / / расширения и установите флажок "Разрешить доступ к URL-адресам файлов"
  4. перезагрузите chrome!
  5. перейдите на страницу, которую вы тестируете и нажмите на значок livereload. Вы должны заметить, что круг в середине значка заполняется.
  6. начните редактирование кода и поразитесь ценным секундам, сохраненным функцией автоматической перезагрузки.
3

извините, чтобы охватить основы, но мы все попадаемся время от времени.

вы нажали кнопку livereload в chrome?

если сервер live reload запущен, если в середине будет сплошная серая точка.

вот так: livereload chrome extension on

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

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

2