如何在gulp.dest()中使用从gulp.src()获取的路径?

Question

我正在尝试创建一个gulp任务，该任务将从不同文件夹中获取一堆文件，通过LESS处理它们，然后将它们输出到基于原始源的文件夹中。考虑以下文件夹结构：

Project
+-- /Module_A
|   +- /less
|   |  +- a.less
|   +- a.css
|
+-- /Module_B
    +- /less
    |  +- b.less
    +- b.css

这是我的gulpfile：

var gulp = require('gulp');
var gutil = require('gulp-util');
var less = require('gulp-less');

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less')
    .pipe(less())
    .pipe(gulp.dest( ??? ));
});

gulp.task('default', ['compileLess']);

我知道gulp.dest()期望传入一个路径，但在我的示例中，基于源文件，路径将会不同。那么我该如何从源文件中获取路径，修改它，然后将其传递给gulp.dest()呢？

或者我这样做是错误的吗？

- Adam

---

根据您的示例输入，输出应该是什么？Gulp使用相对文件路径（基于第一个glob模式）来确定输出目录。 - OverZealous

如果输入是 Project/Module_A/less/a.less，我想要输出为 Project/Module_A/a.css。我使用 gulp-rename 插件成功实现了这个功能。 - Adam

Answer 1

在你的src中设置base选项，它将保持你的less文件的原始路径。

gulp.task('compileLess', function () {
  gulp.src('./*/less/*.less', {base: './'})
    .pipe(less())
    .pipe(gulp.dest( './dist' ));
});

./dist 目标可以是任何地方。无论您希望将文件结构放在哪里。

此处还有其他信息： https://github.com/wearefractal/glob-stream#options

- CoryDorning

---

是的！这就是我在寻找的！ - dansch

关键字 base 给了我错误的想法。这就是我正在寻找的解决方案。 - Simon

添加 , {base: './'} 是至关重要的。 - David Sinclair

但它会在 ./dist 目录下创建一个名为 less 的文件夹，然后将文件放在其中。我该如何指定要排除 'less' 文件夹并将文件放在其他地方？ - Mauro Aguilar

这比被接受的答案更整洁。非常感谢 :) - JDTLH9

Answer 2

你应该看一下 gulp-rename

基本上：

gulp.src('./*/less/*.less')
  .pipe(less())
  .pipe(rename(function(path){
    // Do something / modify the path here         
  }))
  .pipe(gulp.dest('./finalRootDestination'))

你将gulp.dest指向你的最终输出目录，但根据你在gulp-rename回调函数中想要的任何逻辑实时修改各个文件的路径。

- Mangled Deutz

---

你能否进一步解释一下你是如何获得那个的？我正在使用重命名插件，但无法弄清如何获取："img/jquery-prettyPhoto/images/prettyPhoto/image.jpg"以输出到"img/prettyPhoto/image.jpg"。我该如何删除这两个无用的文件夹？谢谢。 - pwnjack

@pwnjack：你看了我发的 gulp-rename 文档了吗？ - Mangled Deutz

当然了，否则我就不会在这里问了。你能否请解释一下如何摆脱文件夹，或者至少设置一个绝对输出路径？谢谢。 - pwnjack

读文档吧，伙计！它清楚地解释了如何操作 dirname，这正是你要找的。 - Mangled Deutz

我更喜欢CoryDorning的回答，这样你甚至不需要再加一根管道符。看起来这正是src()基本选项的设计初衷。 - jinglesthula