gulp :设置多个gulp.src和各自的gulp.dest(在gulp-sass的例子中)

Question

项目结构：

发展

公共

帕格

1sass

2CSS

管理

帕格

3sass

4css

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

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

公共/1sass → 公共/2CSS

admin/3sass → admin/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 compile 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