CODEWITHSUNDEEP
javascriptcsssassgulp
iamleeadamson
iamleeadamson

Reputation: 39

Gulp SASS watch command destination path with wildcard

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?

Upvotes: 1

Views: 1022

Answers (1)

lofihelsinki
lofihelsinki

Reputation: 2571

You need to setbase ingulp.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 cssdir 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('./'));
})

Upvotes: 3

Related Questions