Gulp task comple less to same level folder called css

Question

I want to have a gulp task in Visual Studio Code which watches all files in a folder called less with the extension .less. When found, a task must compile the less files to a folder called css on the same level as the less folder.

Current code:

  
gulp.task('less', function() {
    gulp.src('less/*.less',{ cwd:'..' })
        .pipe(less())
        .pipe(gulp.dest( 'css' ), { cwd:'..' });
});

gulp.task('default', function() {
    gulp.watch('./**/less/*.less', ['less']);
}); 

What I want:

• x
  • y
  • less
    • style.less
  • css
    • style.css

What above code does:

• x
  • y
  • less
    • style.less
• css
  • y
    • less
      • style.css

I had this working when being specific in the path, but the problem is that i've less folders on multiple levels. How can I solve this?

Answer 1

I know this is bit old question, but felt worth sharing my answer.

gulp.task('app:less', [], function () {
return gulp.src(['./src/**/*.less'], { base: './src/' })
    .pipe(less())
    .pipe(gulp.dest('./src/'));
});

Setting base option to root folder with dest path to ./src/ worked for me.

Answer 2

Currently there is no way to do it. The only thing which could approach you to a solution is gulp-flatten. However, this requires to specify a fixed number of parents to include. In your case, where you have folders in different levels, you'd need to specify a different number for each case. So, the only option would be to modify the flatten code to support something like an excludeParents, which does the contrary that flatten, i.e exclude a fixed number of parents (in your case, 1).

Answer 3

Try this :

gulp.task('less', function() {
    gulp.src(['**/*.less', *.less],{ cwd:'less' })
        .pipe(less())
        .pipe(gulp.dest('css'));
});