Question

项目结构：

开发

公共

哈巴狗

1sass

2css

admin

哈巴狗

3sass

4css

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

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

public / 1sass→public / 2css

admin / 3sass→admin / 4css

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

也许{gulp 4.x中有gulp.parallel()可用吗？

更新

我还不明白的两件事：

如何在gulp.dest()？

我了解到file.dirname = path.dirname(file.dirname);删除了相对文件路径的最后一个父目录。但是我应该如何为每个1sass ans 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

请参阅我对类似问题的回答：Gulp.dest for compiled sass。您应该可以根据自己的需要轻松修改它。如果您在使用代码编辑问题时遇到问题，那么您将获得帮助。

即使我们将路径数组放到gulp.src中，gulp将如何理解哪个输出路径与输入路径相关？

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

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

也许gulp.parallel（）在gulp 4.x中可用吗？

不，gulp.parallel（）在这里没有任何帮助。它只是命令执行和完成不同的任务。在您的情况下，没有必要或没有任何实际帮助。

[编辑]

SecureRandom

Answer 2

仅在使用动态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

快乐编码..

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

更新

2 个答案: