How to collect styles in 2 files in Gulp?

Question

gulp.js

Now I collect less files through gallp through import into one and transfer it to the finished project.
I want styles with media queries to be transferred to another file and in the finished project there are styles.css and media.css files.
I tried to do this , but then the variables do not work. Help me please)gulp.src('./src/css/styles.less')gulp.src('./src/css/*.less')

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const del = require('del');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const gulpif = require('gulp-if');
const gcmq = require('gulp-group-css-media-queries');
const less = require('gulp-less');
const smartgrid = require('smart-grid');

const isDev = (process.argv.indexOf('--dev') !== -1);
const isProd = !isDev;
const isSync = (process.argv.indexOf('--sync') !== -1);



function clear(){
  return del('build/*');
}

function styles(){
  return gulp.src('./src/css/styles.less')
         .pipe(gulpif(isDev, sourcemaps.init()))
         .pipe(less())
         .pipe(gcmq())
         .pipe(autoprefixer({
                browsers: ['> 0.1%'],
                cascade: false
            }))
         //.on('error', console.error.bind(console))
         .pipe(gulpif(isProd, cleanCSS({
         		level: 2
         })))
         .pipe(gulpif(isDev, sourcemaps.write()))
         .pipe(gulp.dest('./css'))
         .pipe(gulpif(isSync, browserSync.stream()));
}



function html(){
  return gulp.src('./*.php')
      .pipe(gulpif(isSync, browserSync.stream()));
}

function watch(){
  if(isSync){
    browserSync.init({
          proxy: "shtory"
      });
  }
  gulp.watch('./src/css/**/*.less', styles);
  gulp.watch('./*.php', html);
}

function grid(done){
  let settings = {
    columns: 12,
    	offset: "30px",
    	//mobileFirst: true,
    	container: {
          maxWidth: "1140px",
          fields: "15px"
      },
    	breakPoints: {

    		
    		lg: {
    			width:"1199.98px"
    		},
    		md: {
              width: "991.98px"
          },
          sm: {
              width: "767.98px"
          },
          xs: {
              width: "575.98px"
          },
          xxs: {
              width: "420px"
          }
    	}
  };

  smartgrid('./src/css', settings);
  done();
}

let build = gulp.series(clear, 
  gulp.parallel(styles, html)
);

gulp.task('build', build);
gulp.task('watch', gulp.series(build, watch));
gulp.task('grid', grid);