如何在 gulp.dest() 中找到父目录的路径？

Question

我是 Gulp 的新人，当我尝试将文件输出到其父路径时，我得到了库存。

我的目录如下：

app/page_a/less/a.less
app/page_a/css

我的目标是：

app/page_a/less/a.less
app/page_a/css/a.css

---

这就是我正在做的事情：

我使用 ** 是因为我想匹配我的所有 page_* 模块。

gulp.task('test', function () {
    var files = ['./app/**/*.less'];
    return gulp.src(files, {
            base: '.' // Now the base url becomes where the *.less is.
        })
        .pipe(less())
        .pipe(gulp.dest('.'));
});

---

我的结果：（这显然是错误的：（）

app/page_a/less/a.less
app/page_a/less/a.css
app/page_a/css

那么如何将*.css 输出到对应的app/page_*/css 路径中呢？

Answer 1

用 gulp.dest('.') 你说'这里' 尝试：

.pipe(gulp.dest('./app/page_a/css/'));

这应该可行

Answer 2

您在base 选项中为gulp.src() 指定的路径不是相对于每个相应的.less 文件，而是相对于当前工作目录。这通常是您的Gulpfile.js 所在的目录。

您真正想要做的是在您的less() 插件运行后更改每个生成的.css 文件的路径，因此当.css 文件写入gulp.dest() 指定的目录时/less/部分路径已替换为/css/。

这正是gulp-rename 插件的用途：

var gulp = require('gulp');
var less = require('gulp-less');
var rename = require('gulp-rename');

gulp.task('default', function () {
  return gulp.src( './app/**/*.less') 
    .pipe(less())
    .pipe(rename(function(file) {
       file.dirname = file.dirname.replace(/less$/, "css");
    }))
   .pipe(gulp.dest('./app/'));
});