Не работает плагин 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" // без сжатия
}))
