Gulpを使用する際に処理対象のディレクトリに階層がある場合、シンプルにdestプロパティを使用して出力すると、指定した同階層に全て出力され、出力元の階層が失われてしまいます。

階層を維持したまま出力出来ないか調べていてAPIを読んでみたところ、ディレクトリ構造を維持して出力する方法がありましたのでご紹介します。

例えばこんなケース

Gulpはルート配下に設定して使用することが多いかと思いますが、例えば以下のような場合。

root/
  package.json
  gulpfile.js
  ├ dist/（出力ディレクトリ）
  ├ js/
    ├ shared/
    └ vendor/
  └ sass/
    ├ shared/
    └ vendor/
  └ src/（開発ディレクトリ）
    └ js/
      ├ shared/
      └ vendor/
    └ sass/
      ├ shared/
      └ vendor/

ディレクトリ構造を維持して出力する方法

例えばJavaScirptを出力する場合、開発ディレクトリの./src/js/フォルダ内には更に階層構造となっている為、よくある下記のような設定の方法だと、出力結果は全て./dist/js/直下でに出力されている為、階層構造が壊れてしまいます。

var gulp = reqiore('gulp');

gulp.task('js', function() {
　　gulp.src('./src/js/**/*.js')
　　　　.pipe(gulp.dest('./dist/js/'));
});

そこでGulpが提供しているAPIでbaseというプロパティがありますので、こちらで処理対象のベースとなるディレクトリを指定すると、階層構造を維持したまま出力してくれます。

var gulp = reqiore('gulp');

gulp.task('js', function() {
　　gulp.src('./src/js/**/*.js', {base: './src/'})
　　　　.pipe(gulp.dest('./dist/'));
});

これで各ディレクトリに処理を施さなくても、ディレクトリ構造を継承してくれるので、処理の記述もスッキリします。