gulpfile.js compiles css incorrectly

Question

Styles on my project organized this way:

 styles/
       /1.less
       /2.less
       /..
       /style.less
       /style.css

In style.less are imports in order:

@import '1';
@import '2';
//..

in example 1.less contain properties for html tag, 2.less contain properties for body tag, 3.less contain properties for div tags; I expect the output should I get something like:

html {
    /*this styles first*/
}

body {
    /*this styles second*/
}

div {
    /*this styles third*/
}

but in compiled style.css i get a duplicate style properties:

html {
    /*this styles first*/
}
div {
     /*this styles third*/
}
html {
     /*this styles first*/
}
body {
     /*this styles second*/
}
div {
     /*this styles third*/
}
body {
     /*this styles second*/
}

Build system - Gulp, and gulpfile.js looks like this:

'use strict';

var gulp = require('gulp'),
    watch = require('gulp-watch'),
    concat = require('gulp-concat'),
    less = require('gulp-less'),
    csso = require('gulp-csso')

var path = {
    build: {
        css: 'styles/'
    },
    src: {
        style: 'styles/*.less'
    }
};
gulp.task('style:build', function () {
    gulp.src(path.src.style)
        .pipe(less())
        .pipe(concat('style.css'))
        .pipe(gulp.dest(path.build.css))
});
gulp.task('build', [
    'style:build'
]);
gulp.task('default', ['build']);
gulp.task('watch', function(){
  gulp.watch(path.src.style, ['build']);
});

In my opinion the error lies in gulpfile.js.

Answer 1

Like georg already posted, concatenation of css file is usually used in a way that we import all less files into main less file which is then served to gulp in order to create css file. So use this:

var path = {
  build: {
    css: 'styles/'
  },
  src: {
    style: 'styles/style.less'
  }
};

Or if you want to use all files in gulp for concatenating, delete @import from main less file.