gulpで何かしらのタスクを実行後などにgulp.dest()する際、ディレクトリ・ファイル構成をそのまま維持して出力させる指定方法の備忘録です。

サンプルのディレクトリ・ファイル構成と実装したい動きについて

ここで紹介しているものは下記のようなファイル構成のものを使用していると想定します。
また、動きとしてはgulp.dest()使用時にこの構成のまま/distに出力する（/srcが/distになる感じ）というものになります。

└─ /src
   ├─ index.html
   ├─ /css
   │  └─ style.css
   ├─ /js
   │  └─ script.js
   └─ /images
      ├─ img_01.jpg
      ├─ img_02.jpg
      └─ img_03.jpg

/**/*で指定

手っ取り早くディレクトリ・ファイル構成を維持しつつすべてをgulp.dest()したいときは、下記のようにgulp.src()での指定時にアスタリスクとスラッシュを組み合わせて/**/*と指定すれば容易に実装でき、この方法であれば今後ディレクトリやファイルが増えた際も変更する必要がないです。

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

上記をgulpfile.jsに記述し、このサンプルではこのタスクをデフォルトタスクとして設定しているので$ gulpを実行すれば、/srcと同じディレクトリ・ファイル構成のまま/distに出力されます。
ただし、当たり前ですがこの場合はすべてのディレクトリ・ファイルとなるので、その中に出力したくないものがある場合は別途指定する必要があります。

例えば、個人的にもよく利用する方法だと対象外としたいディレクトリ・ファイル名には_をつけておき、それを!と組み合わせて以下のように記述すれば_が付いたディレクトリ・ファイルは/distには出力されなくなります。

gulpfile.js
gulp.task('default', function() {
  gulp.src([
    'src/**/*',
    '!src/_**/*',
    '!src/**/_*'
  ])
    .pipe(gulp.dest('dist'));
});

個別に指定

上で紹介した方法はとりあえず全ディレクトリ・ファイルを対象とし、その後除外したいものを指定するというものでしたが、除外したいものが多すぎるとか必要なディレクトリ・ファイルだけ指定する方が早いという時は下記のような記述で実装できます。

gulpfile.js
gulp.task('default', function() {
  gulp.src('src/**/*.html')
    .pipe(gulp.dest('dest'));
  gulp.src('src/css/**')
    .pipe(gulp.dest('dest/css'));
  gulp.src('src/js/**')
    .pipe(gulp.dest('dest/js'));
  gulp.src('src/images/**')
    .pipe(gulp.dest('dest/images'));
});

上記をgulpfile.jsに記述し$ gulpを実行すれば、ディレクトリ・ファイルを細かく指定していることもあって冒頭で述べたように/srcと同じ構成のまま/distに出力することが可能です。
ただ、これだとちょっと長ったらしい感じがするのと特に今回のサンプルの場合だと要は/srcと同じ構成で/distに出力をさせることができればいいので、その場合は下記のようにgulp.src()のオプションにあるbaseを用いた形で記述すればもう少しスッキリした記述で実装できます。

gulpfile.js
gulp.task('default', function() {
  gulp.src([
    'src/**/*.html',
    'src/css/**',
    'src/js/**',
    'src/images/**'
  ], {
    base: 'src'
  })
    .pipe(gulp.dest('dist'));
});

baseは処理対象のベースディレクトリを指定するもので、今回のサンプルの場合ではbase: 'src'と記述することで/srcの構成のまま/distに出力することが可能になります。

ちなみに、gulp.src()でbaseを指定せずgulp.dest()をすると構成関係なくすべてgulp.dest()で指定したディレクトリ直下に出力されるので、gulp.src()を先ほどのような記述で指定して且つディレクトリ・ファイル構成を維持してgulp.dest()を行いたいときは、baseを組み合わせて記述しましょう。