gulp-directory-sync でディレクトリを同期する

どうもfujiharaです。ただいまテレワーク中です。本日はgulp-directory-syncを使って ディレクトリを同期する方法をご紹介します
追記:2021/06/28）まずこちらの記事を参考にしていただき、駄目な場合はこちらのgulp-directory-syncをお試しください。

背景

WordPressを開発する際には以下のような構成で行っております。 (以下リポジトリルートです)

.
├── frontend_check (コーディング用)
├── gulpfile.js
├── package.json
├── src (各種ソース)
... (その他各種設定フィル等)

srcディレクトリで各種ソースを用意しgulpで運用してfrontend_checkに吐き出すイメージです

frontend_check以下はこの様になっています

frontend_check
├── archive.html
├── index.html
└── wp-content
    └── themes
        └── xxxxxx
            ├── assets
            │   ├── css
            │   ├── img
            │   └── js
            └── functions.php

この構造見てもらえるとわかると思いますが、コーディング確認用のディレクトリにWordPressのテーマが吐き出されててHTMLファイルでのスタイル読み込みなどに長いパスが列挙されている形でした。もしくはデザインとテーマのリポジトリを分けてデザインの反映をテーマリポジトリに反映するといった事をしていました。（手間）

それを以下のようにしたいと考えました。

.
├── frontend_check
│   ├── archive.html
│   ├── assets
│   │   ├── css
│   │   ├── img
│   │   └── js
│   └── index.html
├── gulpfile.js
├── src (各種ソース)
├── theme
│   └── assets
│       ├── css
│       ├── img
│       └── js
... (その他各種設定フィル等)

で初めにGulpのcopyでfrontend_check/assetsをtheme/assetsにコピーすれば良いかと思ったのですが、 コピー前に削除してあげないといけなかったのでsyncでいけないかなと探していたら gulp-directory-syncがあったので使ってみました。

$ npm install gulp gulp-directory-sync

同期設定 gulpfile.js (Gulp v4.0.x)

const gulp = require('gulp')
const dirSync = require('gulp-directory-sync')

gulp.task('syncDirectory', () => {
  return gulp.src('.')
    .pipe(dirSync(
      'frontend_check/assets',
      'theme/assets',
      {
        printSummary: true,
        ignore: '.DS_Store' //各種同期しないファイルを設定できます(正規表現も)
      }
    ));
})

gulp.task(
  'default',
  gulp.series([
    //other tasks
    'syncDirectory'
    //other tasks
  ])
)

実行すると以下のようになります

[12:24:41] Starting 'default'...
[12:24:41] Starting 'syncDirectory'...
[12:24:41] Dir Sync: 3 files created, 0 files updated, 0 items removed, 0 files unchanged
[12:24:41] Finished 'syncDirectory' after 16 ms
[12:24:41] Finished 'default' after 17 ms
✨  Done in 1.13s.

まとめ

いかがでしたでしょうか、これでWordPressのテーマディレクトリとコーディング用ディレクトリを別けられることができました。
ファイルが2重管理になるのが許容できればお試し下さい。