Gulp sass compile replicating scss files

Question

I am using GULP to compile my scss files and trying trying to compile it down into a single styles.css file. However when I run gulp sass it converts the scss files down to css but also replicates them instead of compiling them all down into one single file.

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./src/css'));
});

gulp.task('sass:watch', function () {
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

file structure

 --gulpfile.js
    --src
      --css
      --sass
        --themes
          --module.scss
          --tm-1.scss
        --styles.scss

when i run gulp sass the css output ends up being:

--css
  --styles.css
  --themes
    --module.css
    --tm-1.css

which all I want here is one single styles.css file and cant seem to understand what I'm missing here.

Answer 1

I have fixed the issue by changing the line

return gulp.src('./src/sass/**/*.scss')

to:

return gulp.src('./src/sass/styles.scss')