gulp - 将 gulp-livereload 与 gulp-sass 一起使用

Question

当我保存对我的 .scss 文件的更改时，Gulp-livereload 给了我一个错误。我的 gulpfile.js 多年来一直运行良好，不久前才开始给我带来麻烦。scss 被编译为 css 并且 livereload 尝试重新加载页面，但我收到以下错误（附照片：https ://i.stack.imgur.com/o57el.png ）。当我手动重新加载页面时，错误消失并反映了样式更改。此外，如果我对其他文件（即 HTML 或 JavaScript）进行更改，一切正常。

值得一提的是，我正在使用 MAMP 创建一个本地 Apache 服务器，所以我认为我不能使用诸如 browsersync 之类的其他东西。任何帮助将不胜感激，谢谢！

这是我的 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'));
});

标签： gulpgulp-sassgulp-livereload