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.

possible duplicate of [Looking for way to copy files in gulp and rename based on parent directory](http://stackoverflow.com/questions/21224252/looking-for-way-to-copy-files-in-gulp-and-rename-based-on-parent-directory) — OverZealous, Feb 23 '14 at 02:56
It looks like you are setting `base` to `'sourceLess'`, the string, rather than `sourceLess`, the variable. — OverZealous, Feb 23 '14 at 20:22

score 3 · Answer 1 · answered Dec 24 '14 at 22:50

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

score 0 · Answer 2 · answered Feb 23 '14 at 16:15

0

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'));

});

answered Feb 23 '14 at 16:15

Wahyu Kristianto

8,719
6
43
68

1

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. – OverZealous Feb 23 '14 at 20:21

Starting Gulp with Gulp-less maintain folder structure

2 Answers2

Linked