gulp.dest()中如何定位parent目录的路径？

Question

我是 Gulp 的新人，当我尝试将我的文件输出到他们 parent 的路径时，我得到了股票。

我的目录是这样的：

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

我的目标是：

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

---

这是我正在做的事情：

I use ** because i want to match all of my page_* module.

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('.') 你说 'here' 尝试：

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

这应该是工作

Answer 2

您在 gulp.src() 的 base 选项中指定的路径不是相对于每个相应的 .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/'));
});