Gulp.js - Use the path from Gulp.src () to Gulp.dest ()

Question

Trying to create a gulp task that will transfer 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 is 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 that gulp.dest () expects the path to be passed, but in my example, the path will be different depending on the source file. So, how can I get the path from the source, change it, and then pass it to gulp.dest ()?

Or am I mistaken about this?

Answer 1

You should see gulp-rename

To a large extent:

 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 to the final output directory, but change the individual file paths on the fly based on any logic you need inside the gulp -rename callback.

Answer 2

in your src set the base parameter and it will save the original path of your smaller file.

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

Destination ./dist can be anything. Wherever you place your file structure.

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