VS 2015 Use Gulp to compile less

I am trying to set up a similar process that Web Essentials offers in the old visual studio in the newest version. For those of you unfamiliar with how this works, the process was as follows:

File Setup:
    a.less
        a.css
            a.min.css
            a.css.map

     b.less
        b.css
            b.min.css
            b.css.map

      

        
        
        
      

    

So, basically, when you open a.less and start editing it, it automatically checks a.css, a.min.css and a.css.map as well. Then when you save, it will recompile 3 additional files and also save fewer files.

I can replicate this by writing a separate task for each file like this:

gulp.task('checkout', function () {
    return gulp.src('Styles/brands.css')
        .pipe(tfs());
});


gulp.task('less', ['checkout'], function () {
    del('Styles/brands.css');

    return gulp.src('Styles/brands.less')
        .pipe(less())
        .pipe(gulp.dest('Styles'));
});

      

        
        
        
      

    

This uses gulp-tfs-checkout to check out the subfile and then less to compile. This works 100% as I expect. I can adjust the clock to show fewer tasks and everything works fine. The only problem is how can I expand it to handle all my smaller files in that folder? I can write a separate check and compile tasks for each file, but this is not ideal.

I use to write projects where saving any fewer files compiles and merges all of them into one or more files, but this is a working project and for several reasons I need to keep the css files separate, like now, We are using visual layout studio, but its old project and people were accidentally referencing css files outside of the merge process, so it would be quite a big / risky task to change that.

I don't know how to watch many files, but only change the current one if it makes sense.

gulp.task('less', function () {
    return gulp.src('Styles/*.less') //watch all of my files
        .pipe(tfs())//checkout only the css file for the less file that was changed here somehow
        .pipe(less()) //compile only the css file that was changed
        .pipe(gulp.dest('Styles'));
});

      

        
        
        
      

    

I'm pretty used to grunt and gulp, but as I said, I generally do things in bulk in my project. I'm not sure how to do this when I want to view all files, but only change 1