6

次のような LESS CSS ディレクトリ構造があるとします。

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

_main.lessディレクトリの各サブディレクトリでファイルを検索する Gulp タスクを作成し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

しかし、それは私が望むものではありません。正規表現を使用してディレクトリ名を一致させ、これを var に戻し、matchesそれに応じてファイルの名前を変更することを考えていました。このようなもの:

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プラグインが表示されていない可能性がありますか?

を使用する必要はないと思います。次の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 に答える