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

gulpで以下のようなフォルダ構成で、page.htmlpage2.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'));
});

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


関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    vuejsの開発環境を構築するでvueをビルドする環境を作成しました。今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。開発用...


  • swig|htmlのヘッダ・フッタの共通化などで実装を効率化する

    swigでhtmlの実装すれば、htmlのヘッダーやフッターの共通化などができ、htmlの管理・実装の効率が格段に上がります。swigとは、テンプレートエンジンの1つで、htmlの中に変数やif文やf...


  • 拡張メタ言語を使用して静的ホームページを簡単に作成する

    ちょっとしたホームページやブログを作成するとき、どのように作成しているでしょうか?最初はhtmlやcssをそのままテキストエディタなどで書いて作成していたが、ページ数が多くなるにつれ管理が大変になり、...


  • テンプレートエンジンのnunjucksとhighlight.js組み合わせる

    便利なテンプレートエンジンのnunjucksのテンプレートの中で、コードをシンタックスハイライト(色付け)する便利なライブラリのhighlight.jsを組み込む方法を紹介します。nunjucksのコ...


  • Nunjucksで独自のファンクションを実行する

    Nunjucksのテンプレートファイルに独自に定義した別ファイルのファンクションを実行する方法を紹介します。gulpでコンパイルする場合を想定しています。gulp-nunjucks-renderでNu...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksがとても便利なのですが、日本語のページがほとんど見当たらなかったので、基本的な使い方を紹介します。ホームページを作成していると、htmlのヘッダと...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。npmは以下のコマンドを実行すれば、package.jsonに記載されているバージョンに更新されます。最新のバージョン...


  • less|cssに変数を使い実装を効率化する方法

    ホームページを作っていて、規模が大きくなっていくにつれ、気をつけていてもcssのソースはグチャグチャになってしまい、後で見返したときに「これはどこのスタイルだっけ?」となってしまうことがあると思います...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • gulp|watchやlivereloadのタスクを停止する方法

    gulpでwatchやlivereloadを停止したい場合、ctrl+Cで停止することができますが、sublime textやatomのプラグインからwatchなどを起動した場合、ctrl+Cで停止す...