Josh Murray Josh Murray - 1 month ago 14
Javascript Question

gulp - gulp-sass compiling from many directories

I am attempting to complile from two different directories and place the outputted files in the same place.

File structure:

- kit
`- scss
`- kit.scss
|- kit-flex.scss
|- kit-grid.scss
`- kit-reboot.scss

- default
`- scss
`- bootstrap.scss
|- bootstrap-flex.scss
|- bootstrap-grid.scss
`- bootstrap-reboot.scss


Gulp task:

gulp.task('kit', function(){
gulp.src(['**/scss/*.scss'])
.pipe(sass())
.pipe(gulp.dest('dist/assets/css'))
});





I am expecting all of the compiled files to be in the
css
directory... but they are not.

Expected:

- dist
`- css
`- bootstrap-flex.css
|- bootstrap-grid.css
|- bootstrap-reboot.css
|- bootstrap.css
|- kit-flex.css
|- kit-grid.css
|- kit-reboot.css
`- kit.css


Actual output:

- dist
`- css
`- default
`- scss
`- bootstrap-flex.css
|- bootstrap-grid.css
|- bootstrap-reboot.css
|- bootstrap.css

`- kit
`- scss
`- kit-flex.css
|- kit-grid.css
|- kit-reboot.css
|- kit.css


Any assistance on how I could achieve the expected output?

Answer

I believe gulp-flatten is what you're looking for.

var flatten = require('gulp-flatten');

gulp.task('kit', function(){
  gulp.src(['**/scss/*.scss'])
    .pipe(sass())
    .pipe(flatten())
    .pipe(gulp.dest('dist/assets/css'))
});