Node.jsを使った開発では、画像などのトランスパイルが不要なファイルを、公開用ディレクトリにそのまま複製するシーンがあります。
今回はnpm-scriptsで特定のファイルやフォルダを指定したディレクトリに自動でコピーする上で必須となるcpx
というパッケージについて解説します。
なお、この記事ではNode.jsおよびnpmがインストールされており、npm-scriptsの基本的な知識があることを前提として進めます。
INDEX
cpx
とは
cpx
とはNode.jsのパッケージで、ファイルのコピーを行うためのツールです。
主に、開発用ディレクトリのファイルを、公開用ディレクトリなどへコピーする際に利用されます。
そもそもnpm-scriptsではパッケージを使わずにデフォルトの機能でコピーを行うことも可能ですが、WindowsやMacどちらかの環境でしか動作しなかったり、指定したフォルダが存在しないとコマンドが実行されなかったりと、デメリットがあります。
そこで、それらのデメリットを補うために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 | ファイルを監視し、コピー元で削除されたファイルを、コピー先のディレクトリから削除 |
おわり
以上でnpm-scriptsのcpx
パッケージでファイルをコピーする開発環境の完成です。
プロジェクトによっては不要な箇所もあるかもしれませんので、それぞれカスタマイズをしてご自身のプロジェクトに活かしていただけますと幸いです。