Как компилировать разные файлы sass в gulp?

Gulp.js - это инструмент для автоматизации задач в процессе разработки веб-приложений. Вместе с Gulp.js вы можете использовать плагины, которые включают в себя функциональность для различных задач, включая компиляцию SASS файлов.

Для компиляции разных файлов SASS в Gulp.js вы можете использовать несколько подходов. Вот несколько вариантов:

1. Использование плагина gulp-sass:
Для начала установите плагин gulp-sass с помощью команды:

   npm install gulp-sass --save-dev

Затем, в вашем файле gulpfile.js добавьте следующий код:

   const gulp = require('gulp');
   const sass = require('gulp-sass');
   
   gulp.task('sass', function () {
     return gulp.src('src/*.sass')  // путь к исходным файлам SASS
       .pipe(sass())
       .pipe(gulp.dest('dist/css'));  // путь к компилированным CSS файлам
   });
   
   gulp.task('default', gulp.series('sass'));

Запустите эту задачу Gulp, используя команду gulp sass.

2. Использование плагина gulp-dart-sass:
Плагин gulp-dart-sass является альтернативной реализацией плагина gulp-sass и обеспечивает компиляцию SASS файлов используя Dart Sass, более современный и быстрый движок SASS.
Установите плагин gulp-dart-sass с помощью команды:

   npm install gulp-dart-sass --save-dev

Затем, в вашем файле gulpfile.js добавьте следующий код:

   const gulp = require('gulp');
   const sass = require('gulp-dart-sass');
   
   gulp.task('sass', function () {
     return gulp.src('src/*.sass')  // путь к исходным файлам SASS
       .pipe(sass().on('error', sass.logError))
       .pipe(gulp.dest('dist/css'));  // путь к компилированным CSS файлам
   });
   
   gulp.task('default', gulp.series('sass'));

Запустите эту задачу Gulp, используя команду gulp sass.

3. Использование плагина gulp-sass-glob:
Плагин gulp-sass-glob позволяет использовать глобальное сопоставление путей в SASS файле, что позволяет компилировать несколько файлов SASS, указывая только один путь в Gulp задаче.
Установите плагин gulp-sass-glob с помощью команды:

   npm install gulp-sass-glob --save-dev

Затем, в вашем файле gulpfile.js добавьте следующий код:

   const gulp = require('gulp');
   const sass = require('gulp-sass');
   const sassGlob = require('gulp-sass-glob');
   
   gulp.task('sass', function () {
     return gulp.src('src/main.sass')  // путь к исходным файлам SASS
       .pipe(sassGlob())
       .pipe(sass())
       .pipe(gulp.dest('dist/css'));  // путь к компилированным CSS файлам
   });
   
   gulp.task('default', gulp.series('sass'));

Запустите эту задачу Gulp, используя команду gulp sass.

Это несколько способов компиляции разных файлов SASS в Gulp.js. Выбор зависит от ваших предпочтений и требований проекта.