[解決済み] Gulp.jsとグロビングパターンを使って、その場（同じdest）のファイルを変更する。

質問

.scssファイルを.cssファイルに変換し（gulp-ruby-sassを使用）、結果の.cssファイルを元のファイルが見つかったのと同じ場所に配置しようとするgulpタスクがあります。問題は、グロビングパターンを使用しているため、元のファイルがどこに保存されているか必ずしもわからないということです。

以下のコードでは、gulp-tap を使用してストリームをタップし、ストリームが読み込まれた現在のファイルのファイル パスを把握しようとしています。

gulp.task('convertSass', function() {
    var fileLocation = "";
    gulp.src("sass/**/*.scss")
        .pipe(sass())
        .pipe(tap(function(file,t){
            fileLocation = path.dirname(file.path);
            console.log(fileLocation);
        }))
        .pipe(gulp.dest(fileLocation));
});

の出力に基づき console.log(fileLocation) の出力から、このコードは問題なく動作するように思えます。しかし、結果の CSS ファイルは、私が期待しているよりも 1 つ上のディレクトリに配置されているようです。本来あるべき場所に project/sass/partials であるべきところ、結果のファイルパスは単に project/partials .

もし、もっと簡単な方法があれば、ぜひその解決策をもっと評価したいと思います。ありがとうございます。

どのように解決するのですか？

ご推察の通り、あなたはこれを複雑にしすぎています。 グロブドパスを使用するため、宛先は動的である必要はありません。 dest にも使われるからです。 単にsrcをグロブしているのと同じベースディレクトリにパイプするだけです。

gulp.src("sass/**/*.scss")
  .pipe(sass())
  .pipe(gulp.dest("sass"));

ファイルが共通のベースを持っておらず、パスの配列を渡す必要がある場合、これはもはや十分ではありません。 この場合、base オプションを指定することになります。

var paths = [
  "sass/**/*.scss", 
  "vendor/sass/**/*.scss"
];
gulp.src(paths, {base: "./"})
  .pipe(sass())
  .pipe(gulp.dest("./"));