gulp：设置多个 gulp.src 和各自的 gulp.dest（在 gulp-sass 示例中）

Question

项目结构：

????发展

　????公开的

　　　????哈巴狗

　　　???? 1sass

　　　???? 2css

　????管理员

　　　????哈巴狗

　　　???? 3sass

　　　???? 4css　　　　　　　

我在文件夹名称中添加数字以模仿 gulp 无法以某种方式猜测哪个输出文件夹相对于输入文件夹的情况。

现在，我想将public/1sass和admin/3sass中的.sass文件编译成.css，分别放到public/2css和admin/4css中：

????公共/1sass → ????公共/2css

????管理员/3sass → ????管理员/4css

我需要如何在gulpfile 中设置sass 任务？即使我们将路径数组放入gulp.src，gulp 将如何理解哪个输出路径与输入路径相关？

也许gulp.parallel() 在 gulp 4.x 中可用？

更新

两件事我还没有理解：

1. 我应该如何设置gulp.dest()中的多个输出路径？

2. 我了解到file.dirname = path.dirname(file.dirname); 删除了相对文件路径的最后一个父目录。但是我应该如何为每个1sass 和3sass 设置它？通过数组？

   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

如果是动态 src 并且您想要各自相同的 dest（在 src 中收到），那么您可以使用以下

示例假设我们有一个 scss 文件数组：

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

运行命令gulp runSASS这将创建以下文件：

src/asdf/test2.css

src/qwerty/test1.css

快乐编码..

Answer 2

查看我对类似问题的回答：Gulp.dest for compiled sass。您应该能够根据您的目的轻松修改它。如果您在使用代码编辑问题时遇到问题，您将获得帮助。

即使我们将路径数组放入 gulp.src，gulp 将如何理解哪个输出路径尊重输入路径？

Gulp 将保留它处理的每个文件的相对路径。因此，在您的情况下， public/1sass 中的文件在 sass 处理后都将具有它们的相对路径信息。并且 admin/3sass 中的文件也都将具有它们的相对路径信息。因此，您只需要找到一种方法来修改该路径信息（父目录结构）即可将文件重定向到所需的目的地。

在您的情况下，这将涉及删除直接父目录并将其替换为“css”目录。 Gulp-rename 是一种方法，而不是唯一的方法。在 gulp-rename 中，您可以检查和修改父目录结构 - 它只是字符串操作。

也许 gulp.parallel() 在 gulp 4.x 中可用？

不，gulp.parallel() 在这里没有任何帮助。它只会命令不同任务的执行和完成。对您的情况没有必要或任何真正的帮助。

[编辑]

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