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?

Given your example input, what should the output be? Gulp uses the relative file paths (based on the first glob pattern) to determine output directory. — OverZealous, Mar 07 '14 at 15:43
If the input is `Project/Module_A/less/a.less`, I want the output to be `Project/Module_A/a.css`. I was able to accomplish using gulp-rename plugin. — Adam, Mar 10 '14 at 01:52

score 87 · Answer 1 · answered Jun 25 '14 at 15:35

87

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

answered Jun 25 '14 at 15:35

CoryDorning

1,854
4
25
36

1

The keyword `base` gave me the wrong idea. This is the solution I was looking for. – Simon Nov 27 '15 at 14:28
1

Adding in `, {base: './'}` was crucial. – David Sinclair Jan 22 '16 at 21:04
1

But it will create a folder inside `./dist` named `less` and then put the file there. How do I specify that I want to exclude the 'less' folder and put the file there? – Mauro Aguilar Jun 25 '17 at 21:38
This is way neater than the accepted answer. Many thanks :) – JDTLH9 Aug 28 '18 at 09:29

score 30 · Accepted Answer · answered Mar 07 '14 at 08:55

30

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.

answered Mar 07 '14 at 08:55

Mangled Deutz

11,384
6
39
35

Can you please further explain how you obtained that? I'm using rename plugin but can't figure out how to obtain: "img/jquery-prettyPhoto/images/prettyPhoto/image.jpg" to output in "img/prettyPhoto/image.jpg". How do i remove those 2 useless folders? thanks – pwnjack Apr 11 '14 at 16:57
@pwnjack : did you read the documentation of `gulp-rename` I linked? – Mangled Deutz Apr 11 '14 at 17:04
1

Ofcourse i did, otherwise i wouldn't have asked here. Can you please explain how to get rid of the folders, or at least set an absolute output path? thanks – pwnjack Apr 11 '14 at 17:23
Read the doc buddy! It clearly explains how to manipulate `dirname`, and this is what you are looking for. – Mangled Deutz Apr 11 '14 at 18:25
5

I like CoryDorning's answer better - then you don't even have to do an extra pipe. It looks like this is what the src() base option was designed for. – jinglesthula Jun 23 '15 at 21:21

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

2 Answers2

Linked