Search code examples
gulplessgulp-less

How can I use the path from gulp.src() in gulp.dest()?


Trying to create a gulp task that will pipe a bunch of files from different folders through LESS and then output them to a folder based on the original source. Consider this folder structure:

Project
+-- /Module_A
|   +- /less
|   |  +- a.less
|   +- a.css
|
+-- /Module_B
    +- /less
    |  +- b.less
    +- b.css

Here's my gulpfile:

var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less')
    .pipe(less())
    .pipe(gulp.dest( ??? ));
});

gulp.task('default', ['compileLess']);

I know gulp.dest() expects a path to be passed in but in my example the path will be different based on the source file. So how can I grab the path from source, modify it and then pass it into gulp.dest()?

Or am I going about this the wrong way?


Solution

  • You should have a look at gulp-rename

    Pretty much:

    gulp.src('./*/less/*.less')
      .pipe(less())
      .pipe(rename(function(path){
        // Do something / modify the path here         
      }))
      .pipe(gulp.dest('./finalRootDestination'))
    

    You leave gulp.dest pointing at your final output dir, but modify on the fly the individual file paths based on whatever logic you want inside the callback to gulp-rename.