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

Question

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?

Answer 1

in your src set the base option and it will maintain the original path of your less file.

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

The ./dist destination can be anything. Wherever you want your file structure to be placed.

Additional info here: https://github.com/wearefractal/glob-stream#options

Answer 2

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.