Gulp SASS watch command destination path with wildcard

Question

I have a gulp watch command on my SASS (SCSS) files in many directories (each directory is a separate project)

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

gulp.task('sass', function(){
  gulp.src('**/Masters/**/assets/scss/*.scss')
  .pipe(sass({
    outputStyle: 'compressed'
  }).on('error', sass.logError))
  .pipe(gulp.dest('**/Masters/**/assets/css'));
})

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

I am stuck with specifying the destination path dynamically. I want to run 1 watch command on the parent directory and then watch each child directory for changes, if there are changes compile the sass and move css file to the css directory in each project folder.

The code i have now is watching each directory as required but the destination doesn't work as expected, the command creates a directory called ** instead of using the ** as a wildcard.

Does anyone know how to dynamically specify the dest path?

Answer 1

You need to set base in gulp.src and dest as the current directory. This will use the input dir as the output.

Then use gulp-rename to add ../css to the directory path. This will direct the output to a css dir that is a sibling to the input dir.

gulp.task('sass', function(){
  gulp.src('**/Masters/**/assets/scss/*.scss', {base: "./"})
  .pipe(sass({
    outputStyle: 'compressed'
  }).on('error', sass.logError))

  .pipe(rename(function (path) {
    path.dirname += "/../css";
  }))

  .pipe(gulp.dest('./'));
})