gulp: set multiple gulp.src and respective gulp.dest (on gulp-sass example)

Question

Project structure:

development

　 public

　　 pug

　　 1sass

　　 2css

　 admin

　　 pug

　　 3sass

　　 4css　　　　　　

I add digits to folder names to imitate the situations when gulp can not guess somehow which output folder is respects to input ones.

Now, I want to compile .sass files in public/1sass and admin/3sass to .css and put it in public/2css and admin/4css respectively:

public/1sass → public/2css

admin/3sass → admin/4css

How I need to setup the sass task in gulpfile? Even if we put the paths array to gulp.src, how gulp will understand which output path respects to input ones?

Maybe gulp.parallel() becomes available in gulp 4.x will do?

Update

Two things that I did not understand yet:

1. How I should to setup the multiple output paths in gulp.dest()?

2. I learned that file.dirname = path.dirname(file.dirname); removes the last parent directory of the relative file path.But how I should to setup it for each of 1sass ans 3sass? Via array?

   const   gulp = require('gulp'),
       sass = require('gulp-sass'),
       path = require('path'),
       rename = require('gulp-rename');   
   
   gulp.task('sass', function(){
        return gulp.src([
       `development/public/1sass/*.sass`,
       `development/public/3sass/*.sass`])
           .pipe(sass())
           // As I can suppose, here we must to setup output paths for each input one
           .pipe(rename(function(file){
               file.dirname = path.dirname(file.dirname);
           }))
           .pipe(/* ??? */);
   });
   

Answer 1

Simply in case of dynamic src and you want respective same dest (as received in src) then you can use following

Example Suppose we have array of scss file:

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

var scssArr = [
    'src/asdf/test2.scss',
    'src/qwerty/test1.scss'
];

    
function runSASS(cb) {
    scssArr.forEach(function(p){
        gulp.src(p, {base:'.'})
        .pipe(sass({outputStyle: 'compressed'}))//outputStyle is optional or simply sass()
        .pipe(gulp.dest('.')); //if othe folder including src path then use '/folder-name' instead of '.', so output path '/folder-name/{src-received-path}'
    })
    cb();
}

exports.runSASS = runSASS; // gulp runSASS

Run command gulp runSASS This will create following files:

src/asdf/test2.css

src/qwerty/test1.css

Happy Coding..

Answer 2

See my answer to a similar question: Gulp.dest for compiled sass. You should be able to modify that easily for your purposes. If you have trouble edit your question with your code and you will get help.

Even if we put the paths array to gulp.src, how gulp will understand which output path respects to input ones?

Gulp will retain the relative paths for each file that it processes. So, in your case, the files in public/1sass will all have their relative path info after sass processing still intact. And the files in admin/3sass will all have their relative path info as well. Thus you only need to find a way to modify that path info (parent directory structure) to redirect the files to a desired destination.

In your case, that would involve removing the immediate parent directory and replacing it with the 'css' directory. Gulp-rename is one way, not the only way, to do that. In gulp-rename you can examine and modify the parent directory structure - it is just string manipulation.

Maybe gulp.parallel() becomes available in gulp 4.x will do?

No, gulp.parallel() will not be of any help here. It will just order the execution and finishing of different tasks. It would not be necessary or of any real help in your case.

[EDIT]

var gulp = require("gulp");
var rename = require("gulp-rename");
var path = require("path");
var sass = require("gulp-sass");

gulp.task('modules-sass', function () {

      // using .scss extensions for sass files

  return gulp.src(`development/**/*.scss`)

    .pipe(sass())

    .pipe(rename(function (file) {

        // file.dirname before any changes
        console.log("file.dirname  1 = " + file.dirname);

        // this removes the last directory
        var temp = path.dirname(file.dirname);
        console.log("    temp = " + temp);

        // now add 'Css' to the end of the directory path

        file.dirname = path.join(temp, 'Css');
        console.log("    after = " + file.dirname);
    }))

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

           // this is the directory structure I assumed
           // gulpfile.js is just above the 'development' directory

// development / Admin / Sass1 / file1.scss
// development / Admin / Sass1 / file2.scss

// development / Admin / Sass2 / file3.scss
// development / Admin / Sass2 / file4.scss

// development / Admin / Css

// development / Public / Sass1 / file5.scss
// development / Public / Sass1 / file6.scss

// development / Public / Sass2 / file7.scss
// development / Public / Sass1 / file8.scss

 // development / Public / Css