Gulpで開発用ディレクトリを構造を維持したままコピーする

Gulpで開発用ディレクトリを構造を維持したままコピーする方法をメモ。

コピー

今回は以下のようなディレクトリで試してみます。

• develop(開発用ディレクトリ)
• public(コピー先)

gulpfile.jsに以下のように記述して、ディレクトリ構造を維持したままコピーするようにします。

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src([
    // コピーするファイル
    'develop/**/*.*', '!develop/**/*.scss'
  ], {
    // コピー元ディレクトリ
    base: 'develop'
  })
    // コピー先ディレクトリ
  .pipe(gulp.dest('public'));
});

6行目の’develop/**/*.*’でdevelop内の全ファイルをコピー対象にして、’!develop/**/*.scss’で.scssファイルのみコピー対象から除外するようにしています。

以下のコマンドでコピーが実行されます。

gulp copy

削除

上記のコピーのみだと、開発用ディレクトリでファイルの削除を行った後にコピーを行った場合、publicディレクトリに削除したファイルが残ってしまいます。
publicディレクトリを削除してからコピーを行うようにしてみます。

delをインストールします。

npm install gulp del --save-dev

publicディレクトリを削除するタスクを追加します。

var gulp = require('gulp'),
del = require('del');

// publicディレクトリを削除
gulp.task('clean', del.bind(null, ['public']));

gulp.task('copy', function() {
  return gulp.src([
    // コピーするファイル
    'develop/**/*.*', '!develop/**/*.scss'
  ], {
    // コピー元ディレクトリ
    base: 'develop'
  })
    // コピー先ディレクトリ
  .pipe(gulp.dest('public'));
});

以下のコマンドを順に実行で、publicディレクトリを削除後にコピーを行います。

gulp clean
gulp copy

直列処理

cleanとcopyを順々に行うタスクを追加してみます。

run-sequenceをインストールします。

npm install run-sequence --save-dev

buildという名前でタスクを追加します。

var gulp = require('gulp'),
del = require('del'),
runSequence = require('run-sequence');

// publicディレクトリを削除
gulp.task('clean', del.bind(null, ['public']));

gulp.task('copy', function() {
  return gulp.src([
    // コピーするファイル
    'develop/**/*.*', '!develop/**/*.scss'
  ], {
    // コピー元ディレクトリ
    base: 'develop'
  })
    // コピー先ディレクトリ
  .pipe(gulp.dest('public'));
});

// publicディレクトリ削除後に開発用ディレクトリをコピー
gulp.task('build', function(callback) {
  return runSequence('clean', 'copy', callback);
});

画像の圧縮など、コピー時にほかのタスクを実行したい場合は22行目に追加します。

以下のコマンドでbuildが実行されます。

gulp build

【参考サイト】

• gulp でディレクトリ構造を維持したコピー – アカベコマイリ
• del
• ファイルとフォルダの削除 | gulp 日本語リファレンス | js STUDIO
• ファイル削除にはgulpプラグインを使わない – Qiita
• run-sequence
• Gulp でタスクを並列/直列処理する – Qiita
• 【gulp】タスク内で run-sequence を使うなら気をつけること – 2noの日記
• gulp の run-sequence を使うときは return を忘れずに – Qiita