What to use to autocompile less?

Question

Angular

Some kind of watcher is needed to compile less, the files are scattered like this:
...\less\ globals.less
...\less\ main.less
...\css\main.css
...\js\components\ my .component.less
...\js\components\my.component.css I
currently use tsc run autoless, but:

• dependencies are not detected
  
• extra files are compiled, such as globals.less
  
• mapping cannot be configured (i.e. less\main.less will be compiled into less \main.css , not css \main.css )
  
• inside js, for "very" nested less files, in order to include globals.less you have to write a long relative path like ../../../../css/globals.less , especially unpleasant when you have to transfer js components to another folder. Need aliases or the ability to specify the root directory.
  

Previously (before angular) I used Grunt for these purposes, but I could not quickly follow TypeScript (here it is discussed, of course, but compilation of ts should be in the same task manager). Maybe try gulp (with what plugins then) or is there something for npm?
* actually a little tired of testing all these locomotives for days, please share the experience of those who worked with this.

Answer 1

If you want, you can take my code for gulp :
In gulp-tasks/config.js it says :

config.common = {
  sourceDir: "source", // Общая папка для исходников, можно указать "." для корня
  buildDir: "dist" // Общая папка для сборки "." для корня
};
config.css = {
  buildDir: "style", // Папка для сборки стилей (внутри config.common.buildDir, указанного выше)
  fileName: "style", // Имя получаемого CSS файла
  autoprefixerOptions: "" // На свой вкус
};
config.less = {
  // ...
  sourceDir:    "style",  // Папка для исходников less стилей (внутри config.common.sourceDir, указанного выше)
  mainFile:     "main", // Главный less файл, который будет собираться
  // ...
};

To watch files not only in the source directory, you need to
rungulp less:watch