Использование gulp-livereload с gulp-sass

Question

Gulp-livereload выдает ошибку, когда я сохраняю изменения в моих файлах .s css. Мой файл gulpfile. js работал нормально в течение многих лет и только что начал немного беспокоить меня, а go. S css компилируется в css, и livereload пытается перезагрузить страницу, но я получаю следующую ошибку (прикрепленное фото: https://i.stack.imgur.com/o57el.png). Когда я вручную перезагружаю страницу, ошибка исчезает, и изменения стиля отражаются. Кроме того, если я вношу изменения в другие файлы (например, HTML или JavaScript), все работает нормально.

Также стоит упомянуть, что я использую MAMP для создания локального Apache сервера, поэтому я не думаю, что смогу использовать что-то еще, например browsersyn c. Любая помощь будет принята с благодарностью!

Вот как выглядит мой gulpfile. js.

'use strict';

var gulp = require('gulp');

var sourcemaps = require('gulp-sourcemaps');

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

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



gulp.task('sass', function () {
  return gulp.src('./styles/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./styles/css'))
    .pipe(livereload());
});

gulp.task('html', function() {
  return gulp.src('./**/*.html')
    .pipe(livereload());
});

gulp.task('js', function() {
  return gulp.src('./js/*.js')
    .pipe(livereload());
});

gulp.task('watch', function () {
  livereload.listen();
  gulp.watch('./styles/sass/**/*.scss', gulp.series('sass'));
  gulp.watch('./*.html', gulp.series('html'));
  gulp.watch('./js/*.js', gulp.series('js'));
});