Gulp less combine several files, let others separate - gulp

Question

Say I have
main1.less
main2.less
main3.less
other1.less
other2.less
other3.less
I need the output
main.css
other1.css
other2.css
other3.css
I do
gulp.task('less', function () {
return gulp.src(['./Content/css/**/*.less'])
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
}))
.pipe(gulp.dest(paths.webroot + 'css'));
});
Actually it generates a css for a less file... Is there a way to combine several files in one, and let others in separate files?

Answer 1

You can accomplish this using gulp-concat to combine the styles you want into one file from a separate task.
const gulp = require('gulp4');
const less = require('gulp-less');
const concat = require('gulp-concat');
const path = require('path');
const config = {
paths: [ path.join(__dirname, 'less', 'includes') ]
};
gulp.task('less:separate', () => gulp
.src(path.join(__dirname, 'Content', 'css', '**', 'other*.less'))
.pipe(less(config))
.pipe(gulp.dest(paths.webroot + 'css')));
gulp.task('less:together', () => gulp
.src(path.join(__dirname, 'Content', 'css', '**', 'main*.less'))
.pipe(less(config))
.pipe(concat('main.css')) // combine them into one file
.pipe(gulp.dest(paths.webroot + 'css')));
gulp.task('less', gulp.parallel('less:separate', 'less:together'));