6

假设我有一个这样的 LESS CSS 目录结构：

less/
    core/
        _main.less
        header.less
        body.less
        footer.less
    contact/
        _main.less
        form.less
        details.less

我想编写一个 Gulp 任务，它将_main.less在目录的每个子目录中查找文件，将其less/传递给 gulp-less 并将输出写入css/目录，如下所示：

css/
    core.css
    contact.css

因为_main.less在它的目录中包含其他文件，所以只_main.less需要解析文件，但我希望输出文件具有它所在目录的名称。

到目前为止，我有这个：

gulp.src('less/*/*/_main.less')
    .pipe(less())
    .pipe(gulp.dest('css'));

但这将创建一个像这样的目录结构：

css/
    core/
        _main.css
    contact/
        _main.css

但这不是我想要的。我正在考虑使用正则表达式来匹配目录名称，将其返回到matchesvar 中，然后相应地重命名文件。像这样的东西：

gulp.src(/less\/[^\/]+\/([^\/]+)\/_main.less/)
    .pipe(less())
    .pipe(rename(function(context) {
        context.src.matches[1] + '.css'
     }))
    .pipe(gulp.dest('css'));

此代码只是一个示例。我无法弄清楚如何做这样的事情，或者是否有可能。

这可能吗？如果是这样，怎么做？

4

1 回答 1

8

你看起来已经有了这个，但也许没有看到gulp-rename插件？

我什至认为您不需要使用 a RegExp，这样的东西应该可以工作：

var rename = require('gulp-rename'),
    path = require('path'); // node Path

//...

gulp.src('less/**/_main.less')
    .pipe(less())
    .pipe(rename(function(filepath) {
        // replace file name to that of the parent directory
        filepath.basename = path.basename(filepath.dirname);
        // remove parent directory from relative path
        filepath.dirname = path.dirname(filepath.dirname);
        // leave extension as-is
     }))
    .pipe(gulp.dest('css'));
于 2014-08-28T17:01:10.330 回答