Have gulp dynamically write css in the same directory as the processed scss file

Question

I want to write my gulpfile.js, scan the theme directory for style.scss files, and the idea is to read the style.scss file and write the corresponding style.css and .min files in the same directory. The problem I am facing is that I cannot find a way to write a css file without knowing exactly what the directory is ... which I will not.

Is this possible with gulp.dest ()?

tl; dr: Essentially ... how can I determine the current path of the processed * .scss file so that I can put the * .css file in the same directory

gulpfile.js

// GULP variable declarations
var gulp = require('gulp'),
  gutil = require('gulp-util'),
  sass = require('gulp-ruby-sass'),
  prefix = require('gulp-autoprefixer'),
  minifycss = require('gulp-minify-css'),
  rename = require('gulp-rename'),
  concat = require('gulp-concat'),
  uglify = require('gulp-uglify');

// Paths array
var path = {
  scss: [
    'docroot/profile/theme/**/*/style.scss',
  ],
  watch_scss: [
    'docroot/profile/theme/**/*.scss',
  ],
};

// Process SASS functionality
gulp.task('process-scss', function() {
  return gulp.src(path.scss)
    .pipe(sass({
      compass: true,
      style: 'expanded',
    }))
    .pipe(prefix(['last 2 versions']))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./relative/dir')
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('./relative/dir')
    .on('error', gutil.log);
});

// Setup the gulp WATCH functionality
gulp.task('default', function() {
  gulp.start('process-scss');
  gulp.watch(path.watch_scss, ['process-scss']);
});

Answer 1

, , gulp.dest(), URL- .

https://github.com/gulpjs/gulp/blob/master/docs/API.md#path

gulp.dest(function(file) {
    return file.base;
}

edit: gulp :

// File path variable declarations
var stylePath = "";
var scriptPath = "";

// Paths array
var path = {
  scss: [
    'docroot/profile/theme/**/style/scss/style.scss',
  ],
  watch_scss: [
    'docroot/profile/theme/**/style/scss/**/*.scss',
  ],
  theme_base: [
    'docroot/profile/theme/',
  ],
};

// Process SASS functionality
gulp.task('process-scss', function() {
  return gulp.src(path.scss)
    .pipe(gulp.dest(function(file) {
      var relative = file.relative.split("/");
      stylePath = path.theme_base + relative[0] + '/style/';
      return file.base;
    }))
    .pipe(sass({
      compass: true,
      style: 'expanded',
    }))
    .pipe(prefix(['last 2 versions']))
    .pipe(concat('style.css'))
    .pipe(gulp.dest(function() { return stylePath; }))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest(function() { return stylePath; }))
    .on('error', gutil.log);
});

Answer 2

gulp.dest , . gulp.dest .

,

gulp.src('docroot/profile/theme/**/*/style.scss')   gulp.dest('dist/profile/theme')

docroot/profile/theme/sample/style.scss dist/profile/theme/sample/style.scss.