How to compile all .less files in a single .css file

I'm trying to configure Gulp in my project, but when I compile the .less files it generates a new .css for each .less, I wanted Gulp to compile all the .less and the result was just a "result.css" . follows my current gulpfile.js below:

var gulp = require('gulp');
var less = require('gulp-less');
var plumber = require('gulp-plumber'),
    browserSync = require('browser-sync'),
    reload = browserSync.reload;

// Compiles less on to /css
gulp.task('less', function () {
  gulp.src('src/**/*.less')
    .pipe(plumber())
   .pipe(less())
   .pipe(gulp.dest('src'))
    .pipe(reload({stream:true}));
});

// reload server
gulp.task('browser-sync', function() {
    browserSync({
        server: {
            baseDir: "./"
        }
    });
});

// Reload all Browsers
gulp.task('bs-reload', function () {
    browserSync.reload();
});


// watch for changes on files
gulp.task('watch', function(){ 
  gulp.watch('src/**/*.less', ['less']);
  gulp.watch("*.html", ['bs-reload']);
}); 

// deploys
gulp.task('default',  ['less', 'watch', 'browser-sync']);