Не работает плагин browser-sync и не работает функция отслеживания изменений на странице

Не так давно захотел научиться пользоваться gulp'ом для упаковки проектов,и столкнулся с тем,что при запуске gulp'а на экран выводится это Та самая ошибка

Переход на страницу осуществляется путем дописывания к localhost /page.html

Но тут параллельно возникает другая проблема: перестает работать функция watchFiles. Как устранить данные проблемы? Файловая структура такова :

1st-gulp-project
├── node-modules
├── src
│   ├── fonts
│   ├── html
│   ├── img
│   ├── js
│   ├── scss
│   ├── page.html
├── gulpfile.js
├── package.json
├── package-lock.json

Сам код gulpfile.js

let project_folder = 'build';
let source_folder = 'src';

/* пути к исходным файлам (src), к готовым файлам (build), а также к тем, за изменениями которых нужно наблюдать (watch) */
let path = {
  build: {
    html: project_folder + '/',
    css: project_folder + '/css/',
    js: project_folder + '/js/',
    img: project_folder + '/img/',
    fonts: project_folder + '/fonts/',
  },
  src: {
    html: source_folder + '/*.html',
    css: source_folder + '/scss/*.scss',
    js: source_folder + '/js/my.js',
    img: source_folder + '/img/*.jpg',
    fonts: source_folder + '/fonts/**/*.ttf',
  },
  watch: {
    html: source_folder + '/**/*.html',
    css: source_folder + '/**/*.scss',
    js: source_folder + '/**/*.js',
    img: source_folder + '/**/*.jpg'
  },
  clean: './' + project_folder + '/'
}

/* подключаем gulp и плагины */
let {
  src,
  dest
} = require('gulp'),
  gulp = require('gulp'), // подключаем Gulp
  browsersync = require('browser-sync').create(), // сервер для работы и автоматического обновления страниц
  plumber = require('gulp-plumber'),
  rigger = require('gulp-rigger'),
  fileinclude = require('gulp-file-include'),
  del = require('del'),
  sass = require('gulp-sass'), // модуль для компиляции SASS (SCSS) в CSS
  autoprefixer = require('gulp-autoprefixer'), // модуль для автоматической установки автопрефиксов
  rename = require('gulp-rename'),
  cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS
  sourcemaps = require('gulp-sourcemaps'); // модуль для генерации карты исходных файлов

/* задачи */
function browserSync(params) {
  browsersync.init({
    server: {
      baseDir: './' + project_folder + '/' // Базовая папка, откуда будет запускаться browser-sync. Значение как для переменной clean
    },
    port: 3000,
    notify: false
  })
}

function html() {
  return src(path.src.html) // выбор всех html файлов по указанному пути
    .pipe(fileinclude())
    .pipe(plumber()) // отслеживание ошибок
    .pipe(rigger()) // импорт вложений
    .pipe(dest(path.build.html)) // выкладывание готовых файлов
    .pipe(browsersync.stream()) // перезагрузка сервера
}

function css() {
  return src(path.src.css) // выбор всех html файлов по указанному пути
    .pipe(plumber()) // для отслеживания ошибок
    .pipe(sourcemaps.init()) // инициализируем sourcemap
    .pipe(sass()) // scss -> css
    .pipe(fileinclude())
    .pipe(autoprefixer()) // добавим префиксы
    .pipe(gulp.dest(path.build.css))
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(cleanCSS()) // минимизируем CSS
    .pipe(sourcemaps.write('./')) // записываем sourcemap
    .pipe(gulp.dest(path.build.css)) // выгружаем в build
    .pipe(browsersync.stream()) // перезагрузим сервер
}


function watchFiles(params) {
  gulp.watch([path.watch.html], html);
  gulp.watch([path.watch.css], css);
}

function clean(params) {
  return del(path.clean);
}
let build = gulp.series(clean, gulp.parallel(css, html));
let watch = gulp.parallel(build, watchFiles, browserSync);

exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Konstantin_SH

введите сюда описание изображенияКажется, ошибка в функции css()

.pipe(sass()) // scss -> css

Надо настроить плагин. А конкретно указать outputStyle :

.pipe(sass({
outputStyle : "expanded" // без сжатия
}))
→ Ссылка