Gulp.js - Use 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

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.

Answer 2

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