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

Question

项目结构：

发展

∀ public

‖哈巴狗

〉〉 1sass

‖2css

》管理员

‖哈巴狗

‖3sass

‖4css‖‖‖‖

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

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

public/1sass → public/2css

admin/3sass → admin/4css

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

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

更新

两件事我还不明白：

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

我了解到 file.dirname = path.dirname(file.dirname); 删除了相关文件的最后一个父目录 path.But 我应该如何为每个 1sass ans [=29] 设置它=]？通过数组？

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

请参阅我对类似问题的回答：。您应该能够根据自己的目的轻松修改它。如果您在使用代码编辑问题时遇到问题，您将获得帮助。

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

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

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

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

不，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

Answer 2

只是在动态 src 的情况下，你想要各自相同的目的地（如在 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

快乐编码..

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

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

gulp

gulp-sass

更新