Starting Gulp with Gulp-less maintain folder structure

Question

I've today started to look at gulp.js to compile my less files etc.

I've got it up and running with a task but the compiled files are all placed in the same folder - not maintaining the source hierarchy.

Is there a way to ensure that the output maintains the original file structure?

I'm new to gulp so may not be doing this correctly.

Here is my gulp file (the part relating to Less):

var sourceLess = 'app/assets/stylesheets/less';
var targetCss = 'public/css2';

// Compile Our Less
gulp.task('less', function() {
return gulp.src([sourceLess + '/my-bootstrap-theme.less', sourceLess + '/themes/*.less'])
    .pipe(less())
    .pipe(minifyCss())
    .pipe(gulp.dest(targetCss));
});

I would like the Less files from the source themes folder placed in the destination themes folder . What options am I missing?

Do I have to run these as separate tasks?

Thanks

Update: I've looked at the suggested post and have changed my paths to this:

gulp.src([sourceLess + '/**/my-bootstrap-theme.less', sourceLess + '/themes/**/*.less', sourceLess + '/responsive.less'], {
    base: 'sourceLess'
})

I also changed my directory variables to this:

var sourceLess = './app/assets/stylesheets/less';
var targetCss = './public/css2';

But it does not produce the folder themes is I expected it to.

Archicarp

possible duplicate of Looking for way to copy files in gulp and rename based on parent directory – Clippard

It looks like you are setting base to 'sourceLess', the string, rather than sourceLess, the variable. – Clippard

Answer 1

If you want to keep the sub-folders, you have to define the base in the options (2nd argument) e.g., to keep "assets/file.doc" in "dist/":

gulp.src(["assets/file.doc"], {base: "."})
    .pipe(gulp.dest("dist/"));

check at link https://github.com/gulpjs/gulp/issues/151

cheers, chidan

Disject

Answer 2

You need to use two streams

var sourceLess  = 'app/assets/stylesheets/less';
var targetCss   = 'public/css2';

gulp.task('less', function() {

    // my-bootstrap-theme.less
    gulp.src(sourceLess + '/my-bootstrap-theme.less')
        .pipe(less())
        .pipe(minifyCss())
        .pipe(gulp.dest(targetCss));

    // themes/*.less
    gulp.src(sourceLess + '/themes/*.less')
        .pipe(less())
        .pipe(minifyCss())
        .pipe(gulp.dest(targetCss + '/themes'));

});

Mortality

No, they don't. They simply need to include the base option in gulp.src(), which I linked to in my comment. This has been answered multiple times on SO already. – Clippard