Как в Gulp cобирать стили в 2 файла?

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

1. Установите Gulp глобально, если вы еще этого не сделали, выполнив команду npm install -g gulp.

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

3. Установите необходимые модули Gulp, связанные со стилями, выполнив команду npm install gulp gulp-sass gulp-concat gulp-autoprefixer gulp-clean-css --save-dev.

4. Включите модули Gulp в файл gulpfile.js путем добавления следующего кода:

const gulp = require('gulp');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');

5. Создайте задачи сборки стилей для каждого файла. Например, если у вас есть два файла стилей styles1.scss и styles2.scss, вы можете создать две задачи: styles1 и styles2.

gulp.task('styles1', function() {
  return gulp
    .src('src/styles1.scss')
    .pipe(sass())
    .pipe(concat('styles1.css'))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'));
});

gulp.task('styles2', function() {
  return gulp
    .src('src/styles2.scss')
    .pipe(sass())
    .pipe(concat('styles2.css'))
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist'));
});

6. Создайте задачу build, которая будет запускать обе задачи сборки стилей одновременно.

gulp.task('build', gulp.parallel('styles1', 'styles2'));

7. Запустите сборку стилей, выполнив команду gulp build в корневой папке вашего проекта.

Таким образом, Gulp будет обрабатывать ваши файлы стилей, собирать их в отдельные CSS файлы (styles1.css и styles2.css), применять автопрефиксеры и сжимать код для лучшей производительности. Вы можете настроить имена файлов и пути назначения по своему усмотрению, обновив параметры в задачах сборки стилей и gulp.dest.