gulp : how to shorten destination folder of an unknow source?

Question

i recently tried to play with gulp a little bit and i'd like to use it to compile multiple sass files into one. So here's my task :

gulp.task('dev', function () { 
   return gulp
   .src('vendor/proj/**/**/src/assets/scss/dev.scss')
   .pipe(sass())
   .pipe( rename (function (path) {
       path.basename = 'dev';
   }))
   .pipe(gulp.dest('public/css'));
});

It work properly except that i'd like to modify the destination. I'm not sure if this is possible tho, but the compiled css end up in : public/css/folder1/subfolder1/src/assets/scss/dev.css
is there anyway for gulp to put the css into : public/css/folder1/subfolder1/dev.css ?

Thanks a lot !

score 0 · Accepted Answer · answered Jan 12 '16 at 09:44

You can use gulp-flatten for this. Your gulp task should look something like:

gulp.task('dev', function () { 
   return gulp
   .src('vendor/proj/**/**/src/assets/scss/dev.scss')
   .pipe(sass())
   .pipe( rename (function (path) {
       path.basename = 'dev';
   }))
   .pipe(flatten({ includeParents: 4} )) // number of parent folders to include
   .pipe(gulp.dest('public/css'));
});

This should put it in folder: public/css/folder1/subfolder1. You can play around with the includeParents option.

A bit late but correct answers are always welcome :) Thank you sir for this knowledge — Jorel Amthor, Jan 12 '16 at 15:38

gulp : how to shorten destination folder of an unknow source?

1 Answers1