Gulp - Watch multiple folders and output to relative dist folder

Question

I want to use gulp to compile SASS for my custom Wordpress plugins.

All plugin folder share same folder structure:

wp-content/plugins/pluginname

assets

dist -

src - scss

GULP TASK

gulp.task('plugin-css', () => {
      // Main SASS Style Sheet
      const pluginSass = gulp.src(`wp-content/plugins/**/assets/src/*.scss`)
        .pipe(plumber(plumberErrorHandler))
        .pipe(sass());

      // Merge the two streams and concatenate their contents into a single file
      return merge(pluginSass)
        .pipe(autoprefixer())
        .pipe(cssmin())
        .pipe(gulp.dest(function(file) {
        return file.base;
      }));
    });

Currently my compiled css file is being output into the same folder as the src sass. How can I output my compiled sass into 'dist' folder?

Answer 1

It is not clear to me what you are trying to do with the merges (so NOTE I simplified those out) but here is something that should help you get to putting your result into a dist folder where you want it to be:

var path = require('path');
var rename = require('gulp-rename');

gulp.task('default', function () {

  const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss")
    .pipe(sass())

    // return merge(pluginSass)

   .pipe(rename(function (file) {
      var temp = path.dirname(file.dirname);
      console.log('temp = ' + temp);
      file.dirname = path.join(temp, "dist");
      console.log("file.dirname = " + file.dirname);
    }))

    .pipe(cssmin())

    // .pipe(autoprefixer())

  .pipe(gulp.dest("wp-content/plugins"));
});

gulp-rename is useful for these situations and always seems to be easier to use that gulp.dest(function... path manipulation).