Gulp destination relative to source - sass

Question

I am trying to parse all SCSS files in all folders, and I need them to be in relative destinations to the original file.
Here is the representation of folder structure I want (basically, scss files in scss folders need to be saved as css files in css folder next to the original scss folder) and rogue scss files (not in scss folder) should have css file saved in same destination as the scss file.
html
│ README.md
│
└───app_abc
│ │ index.php
│ │ something_else.php
│ │
│ └───styles
│ └───scss
│ │ _mixins.scss
│ │ layout.scss
│ │ content.scss
│ │
│ └───css
│ layout.css
│ content.css
│
└───app_def
│ │ index.php
│ │ something_else.php
│ │ rogue.scss
│ │ rogue.css
│ │
│ └───styles
│ └───scss
│ │ _mixins.scss
│ │ layout.scss
│ │ content.scss
│ │
│ └───css
│ layout.css
│ content.css
└───app_ghi
...
I tried playing with it for hours yesterday and today, but to no avail. I can make it to create the CSS file in the same folder, but that's not what I want.
Here is my gulpfile.js (there is a lot of "debug" stuff in it).
var gulp = require('gulp'),
sass = require('gulp-sass'),
path = require('path'),
through = require('through2');
const debug = require('gulp-debug');
const sassFiles = './html/**/[^_]*.scss';
function parsePath() {
return through.obj(function (file, enc, cb) {
console.log(file.base);
console.log(file.cwd);
console.log(file.path);
console.log(file.name);
console.log(path.relative(file.cwd, file.path));
console.log(path.relative(path.join(file.cwd, file.base), file.path))
console.log(path.relative(path.join(file.cwd, file.base), file.path).replace('scss', 'css'))
console.log(file.path.replace(file.name, '').replace('scss', 'css'))
cb();
});
}
gulp.task('sass', function(){
return gulp.src(sassFiles)
.pipe(debug({title: 'test:', minimal: false}))
.pipe(parsePath())
.pipe(sass().on('error', sass.logError))
//.pipe(gulp.dest('css'))
//.pipe(gulp.dest(function (file) {
//return file.path.replace('scss', 'css');
//return path.relative(path.join(file.cwd, file.base), file.path).replace('scss', 'css');
//}))
.pipe(gulp.dest(function (file) {
console.log(file.base);
return file.base;
}));
});
gulp.task('watch', ['sass'], function(){
gulp.watch(sassFiles, ['sass']);
})
Thanks for any help.
Ps.: In any case it was needed, I am running on Debian Jessie x64.
Pps.: I did google and read quite a lot of stackoverflow threads, but none of them had a solution to my problem (well, if it had, it didn't work for me).

Answer 1

This is working. It handles your rogueSASS files correctly and creates a css folder where you want it with the css files in there.
IMPORTANT : The gulp.src files are relative to where your gulpfile.js is located. For this code I have it in the HTML folder - at the same level as the app_xxx folders. If you put it somewhere else you will have to modify the sassFiles and rogueSassFiles declarations.
var gulp = require("gulp");
var sass = require("gulp-sass");
// flatten can be useful to solve tricky long directory changes
// var flatten = require("gulp-flatten");
var rename = require("gulp-rename");
// var using = require("gulp-using");
const sassFiles = './**/styles/scss/*.scss';
const rogueSassFiles = ['./**/*.scss', '!./**/styles/**'];
gulp.task('watch', ['sass', 'rogueSASS'], function () {
gulp.watch( sassFiles, ['sass']);
gulp.watch( rogueSassFiles, ['rogueSASS']);
})
gulp.task('sass', function () {
return gulp.src(sassFiles)
.pipe(sass().on('error', sass.logError))
// remove the "scss" folder name from the end of the directory list
.pipe(rename(function (path) {
var temp = path.dirname.slice(0, -4);
path.dirname = temp + "css";
}))
.pipe(gulp.dest('.'))
})
gulp.task('rogueSASS', function () {
return gulp.src(rogueSassFiles)
// gulp-using shows which files are getting through gulp.src !!
// .pipe(using())
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('.'))
})
These could be made into one task.