Scss browsersync как отследить?

Gulp.js - это инструмент для автоматизации задач веб-разработки, который позволяет упростить процесс разработки, сборки и оптимизации веб-приложений. Scss (Sass) - это препроцессор CSS, который добавляет дополнительные функциональные возможности к CSS, такие как переменные, вложенные стили, миксины и другие. BrowserSync - это инструмент разработки, который позволяет автоматически обновлять браузер после каждого изменения файлов и предоставляет возможность синхронизации действий на нескольких устройствах.

Для отслеживания изменений в файлах SCSS и внедрения их автоматически в браузер с использованием BrowserSync в проекте Gulp.js нужно выполнить следующие шаги:

1. Установите необходимые зависимости. Для работы с Scss и BrowserSync вам понадобятся следующие модули npm:

   npm install gulp-sass browser-sync --save-dev

2. Создайте файл gulpfile.js в корневой папке вашего проекта, если его еще нет.

3. В файле gulpfile.js импортируйте необходимые модули:

   const gulp = require('gulp');
   const sass = require('gulp-sass');
   const browserSync = require('browser-sync').create();

4. Создайте задачу для компиляции SCSS в CSS:

   gulp.task('sass', function () {
     return gulp.src('src/scss/**/*.scss')
       .pipe(sass())
       .pipe(gulp.dest('dist/css'))
       .pipe(browserSync.stream());
   });

Эта задача выбирает все файлы с расширением .scss в папке src/scss и всех ее подпапках, компилирует их в CSS при помощи модуля gulp-sass и сохраняет результат в папке dist/css. Затем задача обновляет браузер с использованием BrowserSync путем вызова метода .pipe(browserSync.stream()).

5. Создайте задачу для запуска сервера BrowserSync:

   gulp.task('server', function () {
     browserSync.init({
       server: {
         baseDir: './'
       }
     });

     gulp.watch('src/scss/**/*.scss', gulp.series('sass'));
     gulp.watch('*.html').on('change', browserSync.reload);
   });

Эта задача инициализирует сервер BrowserSync, указывая ему корневую папку проекта с помощью параметра baseDir. Затем она отслеживает изменения в файлах SCSS и вызывает задачу sass, а также перезагружает страницу в браузере при изменении HTML-файлов.

6. Создайте задачу по умолчанию, которая запускает задачи sass и server:

   gulp.task('default', gulp.series('sass', 'server'));

7. Запустите Gulp:

   gulp

После запуска вы увидите, как Gulp компилирует SCSS в CSS и запускает сервер BrowserSync. Теперь каждый раз, когда вы сохраняете изменения в файлах SCSS, он автоматически обновляет браузер с новыми стилями.

Таким образом, с помощью этих шагов вы сможете отслеживать изменения в файлах SCSS и автоматически внедрять их в браузер с использованием BrowserSync в проекте Gulp.js.