omachizura

仕事メモ、役に立ったスキルをまとめています。


gulpでディレクトリ構造を維持したままdestにコピーする

gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。

  • srcフォルダ
    • Aフォルダ
      • page.html
      • destフォルダ
        • --ここに出力
    • Bフォルダ
      • page2.html
      • destフォルダ
        • --ここに出力

以下のようなタスクでは「**」フォルダが作成されてしまうため、うまくコピーができません。

gulp.task('copy', function(){
  return gulp.src('src/**/*.html')
    .pipe(gulp.dest('src/**/dest')); //「**」フォルダができてしまう
});

gulp-rename

コピーするためには、いろいろとやり方があるかもしれませんが、gulp-renameを使用して、出力先のディレクトリを変更しました。

var rename = require("gulp-rename");

gulp.task('copy', function(){
  return gulp.src('src/**/*.html')
    .pipe(rename(function (path) {
      path.dirname += '/dest';
    }))
    .pipe(gulp.dest('src'));
});

簡単なようで、意外とハマってしまう処理かもしれません。