gulp compile multiple css from multiple sass folders with single command? - build

Question

I have the following files structure:
themes
folder1
-scss
-style.scss
folder2
-scss
-style.scss
foldern
-scss
-style.scss
package.json
gulpfile.js
Need Output in this format:
themes
folder1
-scss
-style.scss
css
-style.css
folder2
-scss
-style.scss
css
-style.css
foldern
-scss
-style.scss
css
-style.css
package.json
gulpfile.js
gulpfile.js:
(function () {
'use strict';
var gulp = require('gulp'),
eslint = require('gulp-eslint'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps')
gulp.task('sass', function () {
return gulp
.src('./**/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'uncompressed'
}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./**/css'));
});
gulp.task('watch', gulp.series('sass', function () {
gulp.watch('./scss/**/*.scss', gulp.series('sass'));
}));
})();
When I compiled using above gulpfile then it's creating **/css/folder1/stle.css **/css/folder2/style.css folders in the theme directory. how can I compile in this format? Is there any specific plugin there in gulp for this.
Thanks in advance.

Answer 1

Try this:
var gulp = require('gulp'),
sass = require('gulp-sass'),
// etc.
// two more plugins
rename = require('gulp-rename')
path = require('path');
gulp.task('sass', function () {
return gulp
.src('./**/scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'uncompressed'
}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
// rename the current file's parent directory
.pipe(rename(function (file) {
// file.dirname = current folder, your "scss"
// then get the parent of the current folder, e.g., "folder1", "folder2", etc.
let parentFolder = path.dirname(file.dirname)
// set each file's folder to "folder1/css", "folder2/css", etc.
file.dirname = path.join(parentFolder, 'css');
}))
.pipe(gulp.dest('.'));
});