【cpx】npm-scriptsでファイル&フォルダのコピーのやり方

Node.jsを使った開発では、画像などのトランスパイルが不要なファイルを、公開用ディレクトリにそのまま複製するシーンがあります。
今回はnpm-scriptsで特定のファイルやフォルダを指定したディレクトリに自動でコピーする上で必須となるcpxというパッケージについて解説します。

cpx公式

Node.jsのバージョン管理ツール「Volta」のインストール・導入方法・使い方を解説

【初心者】npm-scriptsの使い方、web製作・webデザイナー・コーダー向けに1番分かりやすく解説

INDEX

`cpx`とは

cpxとはNode.jsのパッケージで、ファイルのコピーを行うためのツールです。
主に、開発用ディレクトリのファイルを、公開用ディレクトリなどへコピーする際に利用されます。

そもそもnpm-scriptsではパッケージを使わずにデフォルトの機能でコピーを行うことも可能ですが、WindowsやMacどちらかの環境でしか動作しなかったり、指定したフォルダが存在しないとコマンドが実行されなかったりと、デメリットがあります。
そこで、それらのデメリットを補うためにcpxを活用します。

cpx公式

プロジェクトの準備

プロジェクトフォルダを作成

今回のサンプルでは下記のような、トランスパイルが必要ない画像と、外部JSライブラリファイルをdistフォルダに複製する想定で進めていきます。
それでは以下のディレクトリとファイルを参考に、それぞれ適当なファイルを準備してください。

htdocs
└public/
  └images/
   └image01.jpg
   └image02.png
  └js/
   └vendor.js
└dist/ ※`public`フォルダ内のデータをコピーするフォルダ。（自動で生成されるため、作成する必要はない）

プロジェクトフォルダを作成したら以下のコマンドでpackage.jsonを作成します。

npm init -y

パッケージのインストール

以下のコマンドで今回利用するcpxのパッケージをインストールします。

npm i -D cpx

package.jsonのdevDependenciesに以下のようにインストールしたパッケージが記載されたら成功です。

{
  "devDependencies": {
    "cpx": "^1.5.0"
  }
}

スクリプトの登録と解説

cpxではコピー元のファイルの指定方法が複数ありますのでそれぞれ解説します。
それではpackage.jsonのscriptsフィールドに以下のコードを記述し、動作を確認していきましょう。

対象のフォルダーを指定してコピー

{
  "scripts": {
    "copy": "cpx \"public/**\" dist/assets"
  },
}

対象フォルダの中のファイルを、そのままのディレクトリ構造で指定したディレクトリにコピーするスクリプトです。
対象フォルダの後に/**と記載することで、そのディレクトリ以下のディレクトリ構造を維持してビルドされます。

publicフォルダ内のファイルがディレクトリ構造を維持したままdistフォルダにコピーされていれば成功です。

\" \"はエスケープ処理です。
Windowsではシングルクォーテーションを使用することができない為、シングルクォーテーションをダブルクォーテーションに置き換えエスケープ処理を行う必要があります。

対象のファイルを指定してコピー

{
  "scripts": {
    "copy:image01": "cpx \"public/images/image01.jpg\" dist/assets/images"
  },
}

指定した対象のファイルを、指定したディレクトリにコピーするスクリプトです。
image01.jpgがdist/assets/imagesフォルダにコピーされていることを確認してください。

対象の拡張子のファイルを指定してコピー

{
  "scripts": {
    "copy:js": "cpx \"public/**/*.js\" dist/assets"
  },
}

拡張子を対象にしてコピーすることも可能です。
publicフォルダ内の全ての.jsファイルを対象としてコピーを行います。

また、拡張子は複数選択することも可能です。
複数選択する場合は、拡張子を{}で囲み、,で拡張子を繋いで指定します。

{
  "scripts": {
    "copy:multi": "cpx \"public/**/*.{js,jpg}\" dist/assets"
  },
}

自動でコピー（オプション）

最後にオプションの解説です。
これまで解説してきたスクリプトはコマンドを実行するタイミングでコピーを行なってきました。
しかし、監視オプションを追加することで、ファイルを生成したり保存するたびに、自動的にコピーが行われるようになります。

スクリプトの最後に監視オプションの-wをつけて実行してみましょう。
実行後、画像の場合は新しいファイルを生成、JSなどの言語系の場合は保存した後に自動でdist内にコピーされていれば成功です。

{
  "scripts": {
    "watch:copy": "cpx \"public/**\" dist/assets -w"
  },
}

監視オプションが走っている場合は、別のコマンドを実行することができません。
その場合はコマンドラインでcontrol + Cを入力して、監視オプションを停止することができます。

その他にも-Cオプションを利用すると監視ディレクトリとコピー先のディレクトリを同期することができます。
これにより、不要なファイルが自動的に削除され、手動での削除の手間が省けます。
このように、オプションを利用することで、開発プロセスをより効率的に行うことができます。

cpxのオプション	概要
`-w, --watch`	ファイルを監視し、ファイルが変更される度にコピー
`-C, --clean`	ファイルを監視し、コピー元で削除されたファイルを、コピー先のディレクトリから削除

cpx公式

おわり

以上でnpm-scriptsのcpxパッケージでファイルをコピーする開発環境の完成です。

プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていただけますと幸いです。

cpxとは

プロジェクトの準備

プロジェクトフォルダを作成

パッケージのインストール

スクリプトの登録と解説

対象のフォルダーを指定してコピー

対象のファイルを指定してコピー

対象の拡張子のファイルを指定してコピー

自動でコピー（オプション）

おわり

おすすめの書籍

`cpx`とは