Gulp - compile sass by folder, and modify parent directories

Question

I'm new on gulpfile and i can't figure out how can I iterate through multiple folders using a single task

My src folder structure

folder1
   assets
      style.scss
folder2
   assets
      style.scss
folder3
   subfolder1
      assets
         style.scss
   subfolder2
      assets
         style.scss

Into dist folder i want something like this ( without 'assets' folder )

folder1
   style.css
folder2
   style.css
folder3
   subfolder1
      style.css
   subfolder2
      style.css

I have a few tasks that work properly but I want them to be a single task

How can I achieve that?

var pack1 = ['folder1', 'folder2'];
var pack2 = ['subfolder1', 'subfolder2'];

gulp.task('scss_pack1', function () {
  pack1.map(function (element) {
    return gulp.src('src/'+element+ '/assets/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('/dist/'+element+'/));
})

gulp.task('scss_pack2', function () {
  pack2.map(function (element) {
    return gulp.src('src/folder3/'+element+ '/assets/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('/dist/folder3/'+element+'/));
})

Answer 1

Try this:

const gulp = require("gulp");
const sass = require("gulp-sass");
const flatten = require('gulp-flatten');


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

  return gulp.src("src/**/assets/style.scss")
    .pipe(sass())

      // flatten subPath(0, -1) will strip off the last folder, i.e., 'assets'
      // extracts the first element through the second-to-last element in the sequence.
      // so subfolder1/assets -> subfolder1  (the second-to-last element is subfolder1)
      // and assets/ -> nothing (since there is no second-to-last element!!)

    .pipe(flatten({ subPath: [0, -1] }))

    .pipe(gulp.dest("dist/"));
});

gulp-flatten