Question

假设我有一个像这样的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个文件，但我希望输出文件具有目录的名称＆＃ 39; s in。

到目前为止，我有这个：

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

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

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

但那不是我想要的。我正在考虑使用正则表达式匹配目录名称，将其返回到matches var中，并相应地重命名该文件。像这样：

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

这段代码只是一个例子。我无法弄清楚如何做这样的事情，或者甚至可能做到这一点。

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

Answer 1

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

我甚至认为你不需要使用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'));

在Gulp中基于正则表达式重命名文件

1 个答案: