Search code examples
csslessgulpgulp-less

How to detect root files in LESS using gulp compilation


Here is the thing. I have following structure of my LESS files:

/less/root.less
/less/includes1/*.less (a lot of less files)
/less/includes2/*.less (a lot of less files)

I am using gulp to compile my LESS files. Source:

gulp.task('less', function () {
    var combined = combiner.obj([
    gulp.src('./less/**/*.less'),
    less(),
    gulp.dest('./www/dist/screen.css')
]);

// any errors in the above streams will get caught by this listener, instead of being thrown:
combined.on('error', console.error.bind(console));

return combined;
});

The problem is in the specified path. I understand this path ./less/**/*.less like this: Recursively go through all folders and compile all files that ends .less. Problem is that compiler wants to compile each file one by one and doesnt know that all files are included to my source.less. It doesnt look for root files and doesnt know what files are included parts and what are root files.

How do I tell LESS parser which files are root and which files are to be imported. In SASS it is specified via underscore in file name like this: _includedPart.scss.


Solution

  • Well you can use https://github.com/robrich/gulp-ignore. See: How can I use a glob to ignore files that start with an underscore?

      var condition = '_*.less'; //exclude condition
      gulp.src('content/**/*.less')
        .pipe(gulpIgnore.exclude(condition))
    

    In many situations you all your Less code into a single CSS file. Your main file(s) contain @import directive which point all other required Less files.