gulp.dest() ignoring subdirectory

Question

My Folder Tree

public_html/
- css/
- - bootstrap.css
- - theme.css
- scss/
- - bootsrap/
- - - bootstrap.scss
- - theme/
- - - theme.scss

My gulpfile :

var gulp = require('gulp');

//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';

//Compile Styles
gulp.task('CompileSASS', function () {
    gulp.src(scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(cssPath))
});

gulp.task('watchSASS', function () {
    gulp.watch(scssPath, ['CompileSASS']);
});

gulp.task('default', ['CompileSASS', 'watchSASS']);

---

What Happens

When I run my gulpfile's default method, generated CSS files are saved in subfolders in CSS folder.

/public_html/css/bootstrap/bootstrap.css

/public_html/css/theme/theme.css

---

What Needed

I dont want to them to be saved in seperate folders.

How can I save all my generated CSS files in CSS directory directly like:

/public_html/css/bootstrap.css

/public_html/css/theme.css

Answer 1

You should have a look at gulp-rename

Try:

var gulp = require('gulp');

//Plugins
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var rename = require('gulp-rename');

var scssPath = './public_html/scss/**/*.scss';
var cssPath = './public_html/css/';

//Compile Styles
gulp.task('CompileSASS', function () {
    gulp.src(scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer())
        .pipe(sourcemaps.write())
        //--------
        .pipe(rename({dirname: cssPath}))
        //--------
        .pipe(gulp.dest('./'))
});

gulp.task('watchSASS', function () {
    gulp.watch(scssPath, ['CompileSASS']);
});

gulp.task('default', ['CompileSASS', 'watchSASS']);