CODEWITHSUNDEEP
gulpgulp-less
Ray
Ray

Reputation: 3060

Starting Gulp with Gulp-less maintain folder structure

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.

Upvotes: 1

Views: 4409

Answers (2)

Chidu Murthy
Chidu Murthy

Reputation: 688

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

Upvotes: 3

W Kristianto
W Kristianto

Reputation: 9303

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

});

Upvotes: 0

Related Questions