Gulp-sass - remove path of file

Question

I'm using gulp-sass to compile scss into css and have managed to get it working somewhat. At the moment this is the code i have setup in my gulp file:

gulp.task('sass', function () {
  gulp.src('./popup/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./build/css'))
});

The only issue I have is when it compiles into css files instead of just creating a index.css file in the dest ./build/css it appends a whole tree of folders that mirrors the tree where the file came from. So for example if one of my files lives in app\src\scripts\components\app\new-ticket\css then in the build folder will be the same tree: \src\scripts\components\app\new-ticket\css with the file in the last folder.

Is there a setting or a way I can remove the path in gulp-sass so i'm just left with build/css/index.css but keep the same path structure where the .scss files live?

Thing you are looking for is `concat`, here is a link https://stackoverflow.com/questions/26273358/gulp-minify-all-css-files-to-a-single-file — nivas, Aug 08 '17 at 08:59
If you want to answer the question with that ill mark it as correct! — red house 87, Aug 08 '17 at 09:13

score 0 · Accepted Answer · answered Aug 09 '17 at 06:17

Use another pipe to add concat. This function takes a destination file name to generate one css (or) js file.
Here is the code:

gulp.task('sass', function () {
  gulp.src('./popup/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('index.css'))
    .pipe(gulp.dest('./build/css'))
});

Gulp-sass - remove path of file

1 Answers1