Gulp 任务编译较少到名为 css 的同级文件夹答案

【问题标题】：Gulp task comple less to same level folder called cssGulp 任务编译较少到名为 css 的同级文件夹
【发布时间】：2015-11-03 12:03:12
【问题描述】：

我想在 Visual Studio Code 中有一个 gulp 任务，它监视名为 less 的文件夹中的所有文件，扩展名为 .less。找到后，任务必须将 less 文件编译到与 less 文件夹处于同一级别的名为 css 的文件夹中。

当前代码：

  
gulp.task('less', function() {
    gulp.src('less/*.less',{ cwd:'..' })
        .pipe(less())
        .pipe(gulp.dest( 'css' ), { cwd:'..' });
});

gulp.task('default', function() {
    gulp.watch('./**/less/*.less', ['less']);
});

我想要什么：

x
- 是
- 少
  - style.less
- CSS
  - style.css

上面的代码做了什么：

x
- 是
- 少
  - style.less
CSS
- 是
  - 少
    - style.css

我在指定路径时可以使用此功能，但问题是我在多个级别上的文件夹较少。我该如何解决这个问题？

【问题讨论】：

这会在与 less 文件相同的文件夹中创建 css 文件。我希望 css 文件与名为 less 的文件夹位于同一级别的名为 css 的文件夹中。

标签： less gulp gulp-less visual-studio-code

【解决方案1】：

我知道这是个老问题，但觉得值得分享我的答案。

gulp.task('app:less', [], function () {
return gulp.src(['./src/**/*.less'], { base: './src/' })
    .pipe(less())
    .pipe(gulp.dest('./src/'));
});

将base 选项设置为根文件夹，dest 路径为./src/ 对我有用。

【讨论】：

【解决方案2】：

目前没有办法做到这一点。唯一可以让您找到解决方案的是gulp-flatten。但是，这需要指定要包含的固定数量的父级。在您的情况下，您有不同级别的文件夹，您需要为每个案例指定不同的编号。因此，唯一的选择是修改展平代码以支持excludeParents 之类的东西，这与展平相反，即排除固定数量的父母（在您的情况下为 1）。

【讨论】：

【解决方案3】：

试试这个：

gulp.task('less', function() {
    gulp.src(['**/*.less', *.less],{ cwd:'less' })
        .pipe(less())
        .pipe(gulp.dest('css'));
});

【讨论】：