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

Question

[Константин Клубков]

Сейчас через галп собираю less файлы через импорт в один и его переношу в готовый проект.
Хочу чтобы стили с медиа запросами передавались в другой файл и в готовом проекте были файлы styles.css и media.css.
Пробовал в 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);

Comments

[Ankhena]

Хочу чтобы стили с медиа запросами передавались в другой файл и в готовом проекте были файлы styles.css и media.css

Не надо так хотеть.
Надо хотеть, чтобы всё было в одном файле. А media тем более.

Еще в своих исходниках вы можете писать как угодно (ну если не думать, что кто-то другой будет поддерживать потом этот проект). А к сайту-то зачем 2 файла подключать. Их специально собирают все вместе и минимизируют.