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

【问题标题】：Rename file based on regex in Gulp在 Gulp 中基于正则表达式重命名文件
【发布时间】：2014-08-28 15:23:29
【问题描述】：

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

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

我想编写一个 Gulp 任务，它将在 less/ 目录的每个子目录中查找 _main.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

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

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

此代码只是一个示例。我不知道如何做这样的事情，或者是否有可能。

这可能吗？如果有，怎么做？

【问题讨论】：

标签： gulp gulp-rename

【解决方案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'));

【讨论】：