Как компилировать свой css файл для каждой страницы в Gulp?

Для того чтобы компилировать свой CSS файл для каждой страницы в Gulp, вам потребуется использовать плагин "gulp-watch" для отслеживания изменений файлов, а также плагин "gulp-sass" для компиляции SCSS-файлов в CSS. Давайте разберемся с каждым шагом более подробно:

1. Установка зависимостей
Сначала убедитесь, что у вас установлен Node.js и NPM (Node Package Manager). Затем создайте новый проект, инициализировав его с помощью команды npm init в командной строке. После этого установите необходимые зависимости командой npm install gulp gulp-watch gulp-sass --save-dev.

2. Настройка Gulp
Создайте файл gulpfile.js в корневой папке вашего проекта и подключите необходимые плагины следующим образом:

   const gulp = require('gulp');
   const watch = require('gulp-watch');
   const sass = require('gulp-sass');

3. Настройка задачи компиляции CSS
Следующим шагом будет настройка задачи компиляции CSS. Добавьте следующий код в вашем gulpfile.js:

   gulp.task('sass', function () {
     return gulp.src('src/scss/*.scss') // Путь к вашим SCSS-файлам
       .pipe(sass().on('error', sass.logError))
       .pipe(gulp.dest('dist/css')); // Путь для сохранения скомпилированных CSS-файлов
   });

4. Настройка отслеживания изменений файлов
Для автоматической компиляции CSS при изменении SCSS-файлов добавьте следующий код:

   gulp.task('watch', function () {
     gulp.watch('src/scss/*.scss', gulp.series('sass'));
   });

   gulp.task('default', gulp.series('watch'));

Этот код будет отслеживать изменения в файлах SCSS и автоматически компилировать их при каждом изменении.

5. Запуск Gulp
Наконец, запустите Gulp, выполнив команду gulp в командной строке или терминале.

При каждом изменении SCSS-файлов, которые находятся в папке src/scss, будет происходить автоматическая компиляция в CSS и сохранение в папке dist/css.

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