当我保存对我的 .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'));
});